vue 监听不到数据更新

最新推荐文章于 2023-12-04 11:28:06 发布

原创最新推荐文章于 2023-12-04 11:28:06 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

工作专栏收录该内容

19 篇文章

订阅专栏

本文解决在使用Vue.js结合ElementUI进行循环渲染多选框时，新增属性selectList无法正确监听并更新视图的问题。阐述了在实例创建后动态添加属性，导致视图不更新的原因及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个循环渲染多行多选框的页面，使用可element ui 的 checkdebox 组件。一维数组循环的是每一个多选框组，二维循环的是每个多选框组的选项。

<el-row v-for="(item,index) in settingData" :key="index">
      <el-col :span="4">
        <span >{{item.typeName}}：</span>
      </el-col>
      <el-col :span="20">
        <el-checkbox-group v-model="item.selectList">
          <el-checkbox v-for="(optionItem,optionIndex) in item.list"
                       :label="Number(optionItem.value)"
                       :key="optionIndex"
                       :disabled="index===0">{{optionItem.key}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>

settingData =[
{list: [{key: "计划完成率", value: "1"}], typeName: "计划状态",typeValue: 0},
 {list: [{key: "未处理", value: "1"}, {key: "初筛不合格", value: "2"}, {key: "初筛通过",value: "3"}],typeName: "简历初筛"typeValue: 1]

最后的结果是点击多选框没有显示选中转态，打印 item.selectList 却是有选中数据。然后怀疑是vue监听不到数据变化，没有刷新页面。item.selectList 是之前没有定义的，是在这里新加的一个存储多选框选中内容的属性。

折腾了好久，以为是二维数组监听不到的问题，后来发现是：

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

item.selectList 是在实例创建之后添加的，vue 监听不到，必需在实例创建之前添加才可以被监听到。

参考：https://www.jianshu.com/p/71b1807b1815 这是简书上大佬写的，写的很明白。