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)
Logo

前往低代码交流专区

更多推荐