Vue中this.$set的使用

Vue中this.$set的使用

项目中碰到一个问题，改变一个对象的属性，从控制台打印结果看，属性已经发生改变，但没有更新到视图中

解决：使用this.$set(target,key,value);

百度解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性。

注：target：要更改的数据源(可以是对象或者数组); key：要更改的具体数据　　value ：重新赋的值

<template>
  <div>
    <p v-for="(item,index) in items" :key="index">{{item.message}}</p>
    <button @click="changeDataHandle">更改数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 测试数据
      items: [{id: '1',message: 'one'},{id: '2',message: 'two'},{id: '3',message: 'three'}],
    }
  },
  mounted() {
    this.items[0] = {id: '0',message: '测试数据'};
    console.log('items==>>',this.items);//打印结果可以发现，items[0]的数据已经改变，但显示未变
  },
  methods: {
    // 点击时，this.$set改变数据,显示同时改变
    changeDataHandle() {
      this.$set(this.items,0,{message: '更改后的值',id: '0'});
    }
  }
}
</script>