这次给大家带来Vue.js的列表数据的同步更新方法，Vue.js列表数据同步更新方法的注意事项有哪些，下面就是实战案例，一起来看一下。
数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;
filter(),concat(),slice()等不会触发列表的更新!
下面两种情形也不会触发列表数据更新
1.为数组的某一项赋值 vm.items[indexOfItem] = newValue,
2.改变数组的长度 vm.items.length = newLength也不会触发列表的更新!
要实现的效果:
列表数据的更新
代码:
<template>
<div id="myapp">
<ul>
<li v-for="item in list">
{{item.name + '-' + item.price}} </li>
</ul>
<button v-on:click="addItem">addItem</button>
</div></template><script>
export default { data: function () { return { list: [
{ name: 'apple', price: 34
},
{ name: 'banana', price: 56
}
]
}
}, methods: { //点击按钮新增push触发列表数据的更新
addItem () { this.list.push({ name: 'pinaapple', price: 256
})
}
}
}</script>为数组的某一项赋值 vm.items[indexOfItem] = newValue不会触发列表数据的更新,那么怎么才能让他更新数据呢? 用Vue的set()方法可以办到.
methods: {
addItem () {// 把数组的第 1 个替换成新的值
Vue.set(this.list, 1, {
name: 'pinaapple',
price: 256
})
}
}效果图:
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci Vue.js的列表数据的同步更新方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
