阅读数:51 评论数:0

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

<template>
  <div id="app">
    <div v-for="item in items" :key="item.id">
      {{ item.name }},{{ item.id }}
    </div>
    <el-button @click="handClick()">更改数据</el-button>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { name: "张三", id: "1" },
        { name: "李四", id: "2" },
        { name: "王五", id: "3" },
      ],
    };
  },
  mounted() {
    this.items[0] = { name: "张三三", id: "11" }; //此时对象的值更改了，但是视图没有更新
  },
  methods: {
    handClick() {
      this.$set(this.items, 1, { name: "李四四", id: "22" });
      this.$set(this.items[2], "name", "王五五");
    },
  },
};
</script>