[ 记录 ] Vue 对象数组中一项数据改变,页面不更新


问题描述:将data中数据列表渲染到页面,循环生成 el-switch ,点击页面中 el-switch 后数组中某项值改变,但是页面不更新

数据格式如下

export default{
   data(){
      list : [
          {
              id : 1,
              selected : true,
              title : 'aaa'
          },
          {
              id : 2,
              selected : false,
              title : 'bbb'
          },
          {
              id : 3,
              selected : true,
              title : 'ccc'
          }
      ] 
   }        
}

原因是因为 利用索引直接设置一个项值之后,Vue不能检测到数据变化   详情参考:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

同时官方也提供了相应的api来解决这个问题

vm.$set(vm.items, indexOfItem, newValue)

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM