vue2更改数组视图不更新

<div v-for="item in list" :key="item">{{item}}</div>
    <button @click="arrayChange">改变数组内容</button>
    <button @click="arrayLengthChange">改变数组长度</button>
</div>

...
data(){
   return{
      list:[11,22,33]
   }
}
...

arrayChange(){
  this.list[0] = 999  // 像这样直接改是不行的,vue监听不到数组的变化
  // 方法1  $set
  this.$set(this.list,0,999)
  // 方法2  splice
  this.list.splice(0,1,999)
}

arrayLengthChange(){
  this.list.length--  // 像这样直接改是不行的,vue监听不到数组的变化
  // 方法1  $delete
  this.$delete(this.list,1)
  // 方法2  splice
  this.list.splice(0,1)
}
posted @ 2021-02-19 15:00  zoo-x  阅读(35)  评论(0)    收藏  举报