Vue реактивность не подбирает новое свойство, добавленное к элементу в массиве - PullRequest
Новая
       34

Vue реактивность не подбирает новое свойство, добавленное к элементу в массиве

0 голосов
/ 03 августа 2020

Не уверен, правильно ли я объясняю это, но я столкнулся с проблемой, когда один из моих элементов шаблона не реагирует на добавленное свойство элемента массива. Например: 

<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 Ответ

2 голосов
/ 03 августа 2020

Вы должны использовать метод 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>
...