vue表格刷新数据_Vue.js的列表数据的同步更新方法

这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下。

数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;

filter(),concat(),slice()等不会触发列表的更新!

下面两种情形也不会触发列表数据更新

1.为数组的某一项赋值 vm.items[indexOfItem] = newValue,

2.改变数组的长度 vm.items.length = newLength也不会触发列表的更新!

要实现的效果:

列表数据的更新

代码:

  • {{item.name + '-' + item.price}}

addItem

为数组的某一项赋值 vm.items[indexOfItem] = newValue不会触发列表数据的更新,那么怎么才能让他更新数据呢? 用Vue的set()方法可以办到.methods: {

addItem () {// 把数组的第 1 个替换成新的值

Vue.set(this.list, 1, {

name: 'pinaapple',

price: 256

})

}

}

效果图:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:


版权声明:本文为weixin_39915267原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。