Vue 反应性不会拾取添加到数组中元素的新属性答案

【问题标题】：Vue reactivity doesn't pick up new property added to element in a arrayVue 反应性不会拾取添加到数组中元素的新属性
【发布时间】：2020-08-03 18:46:31
【问题描述】：

不确定我的解释是否正确，但我面临一个问题，即我的模板元素之一没有对数组元素的添加属性做出反应。例如：

<div v-for="user in users"
     v-bind:key="user.id"
     v-bind:name="user.name">
     {{user.name}}
     <div class="warn" v-if="user.hasWarning">Warning!</div>
</div>

每当hasWarning: true 添加到user 时，我都会尝试显示警告

data:() {
  users: [
    {id: 1, name: "Foo"}
  ]
},
methods:{
  showWarning: function(id) {
    users.forEach(user => {
      if (user.id == id) {
        user.hasWarning = true;
      }
    });
  }
}

我尝试调用 showWarning(id)，我确实看到 hasWarning 从控制台和 Vue 开发人员工具添加到用户，但它没有呈现 <div class class="warn" v-if="user.hasWarning"..。如果我将我的用户设置为{id: 1, name: "foo", hasWarning: false}，它似乎工作正常，但为什么它不适用于添加的属性？我应该完全避免吗？

【问题讨论】：

+1 @Gabriel's answer, plus 使用严格相等 (===) 代替 == 被认为是一种更好的做法。

标签： javascript vue.js vue-reactivity

【解决方案1】：

您必须使用方法this.$set 来注册新属性。请参阅文档：https://vuejs.org/v2/api/#vm-set

试试这样的：

<template>
  <div>
    <div v-for="user in users" v-bind:key="user.id" v-bind:name="user.name">
      {{ user.name }}
      <button @click="showWarning(user.id)">showWarning</button>
      <div class="warn" v-if="user.hasWarning">Warning!</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    users: [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }],
  }),
  methods: {
    showWarning(id) {
      let user = this.users.find(user => user.id == id);
      this.$set(user, 'hasWarning', true);
    },
  },
};
</script>

【讨论】：