关于this.$set更新视图问题

Question

为什么使用this.$set(arr[0], id, 1)也无法更新视图,使用this.$set(arr, 0, { ...arr, id: 1 });这样才可以更新视图

Answer 1

不知道你是vue 多少版本，我测试的是vue2 是可以的。首先你要确保你的arr[0]是有值的，且值为对象。

测试代码

<template>
  <div> 
     <div v-for="item in arr" :key="item.id">
      <span>{{item.name}}</span>
    </div>
    <button @click="handleChanage">change</button>
  </div>
 
</template>

<script>

export default {
  data() {
    return {
      arr:[
        
      ]
    };
  },
  mounted(){
    this.arr = [
      {
        id:1,
        name:'admin'
      }
    ]
  },
  methods: {
   
    handleChanage(){
      this.$set(this.arr[0],'name','test')
      
    }
  },
};
</script>