vue无法通过下标修改数组

首先官方定义不能修改的：

Vue 不能检测以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

 1.直接通过下标整体替换

      


        系统正在运行，请稍等...  {{ !isNaN(item.value)?('当前结果是：'+item.value):'' }}

      

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('')
}