首先官方定义不能修改的:
Vue 不能检测以下数组的变动:
- 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:vm.items.length = newLength
1.直接通过下标整体替换
<ul>
<li v-for="(item, index) in timeWait" :key="index">
<span>系统正在运行,请稍等... {
{ !isNaN(item.value)?('当前结果是:'+item.value):'' }}</span>
</li>
</ul>
created() {
this.timeWait.push({id:'001',value:90})
},
methods: {
handelOk(type, data) {
this.timeWait[0] = {id:'002',value:80}
}
结果:修改失败,页面不变。
2.通过下标添加属性
created() {
this.timeWait.push({id:'001'})
},
methods: {
handelOk(type, data) {
this.timeWait[0].value = 80;
}
结果:修改失败,页面不变。
3.通过下标修改对象
created() {
this.timeWait.push({id:'001',value:80})
},
methods: {
handelOk(type, data) {
this.timeWait[0].value = 900;
}
结果:修改成功,页面改变。这也是很多杠精说下标能改变数组成为响应式。
补充:通过弟2种方式添加是不能修改的,但是如果修改后立马push一个数据进去,就会神奇的发现,页面能够显示了。
created() {
this.timeWait.push({id:'001'})
},
methods: {
handelOk(type, data) {
this.timeWait[0].value = 80;
this.timeWait.push('')
}