Vue.set()例 -->直接对数组中的元素赋值不会触发Vue的响应式更新

Vue.set()例  -->直接对数组中的元素赋值不会触发Vue的响应式更新
 data () {
     return {
         dataSource: [{
             id: 1, name: Bill, age: 21
         },{
             id: 2, name: stive, age: 23
         },{
             id: 3, name: alan, age: 26
         }]
     }
 }
 我们修改了其中的某一项,并通过下面的方式更新到数组中:
 let modifiedRow = {id: 2, name: cook, age: 20}
 this.dataSource[1] = modifiedRow
 // 视图未发生更新
 我们会发现,表格中现实的数据并没有改变,这是因为直接对数组中的元素赋值不会触发Vue的响应式更新,为了解决 Js 语言特性的限制,Vue提供了一种变通的方法,通过 push() 、 pop() 、 shift() 等函数来修改数组即可。
 dataSource.splice(1, 1, modifiedRow)
 // 视图响应式更新
 除此之外我们也可以通过 Vue.set() 函数修改数组,比如:
 Vue.set(dataSource, 1, modifiedRow)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值