Vue.set()例 -->直接对数组中的元素赋值不会触发Vue的响应式更新
Vue.set()例 -->直接对数组中的元素赋值不会触发Vue的响应式更新 data () { return { dataSource: [{ id: 1, name: Bill, age: 21 },{ id: 2, name: stive, age: 23 }
·
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)
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)
更多推荐
已为社区贡献3条内容
所有评论(0)