Question

我在utils中有一个列表，几乎可以在任何地方使用它，并且每个对象中只有text变量。

在我的组件之一中，我需要向该列表中的每个项目添加done变量，以便可以对其进行切换。我可以看到该变量已添加，但是无论何时切换它，视图都不会更新。

const arrayFromUtils = [{
    text: "Learn JavaScript"
  },
  {
    text: "Learn Vue"
  },
  {
    text: "Play around in JSFiddle"
  },
  {
    text: "Build something awesome"
  }
];

new Vue({
  el: "#app",
  data: {
    todos: arrayFromUtils
  },
  mounted() {
    this.todos.forEach(item => (item.done = false));
  },
  methods: {
    toggle: function(todo) {
      todo.done = !todo.done

      console.log('toggled item: ', todo);
    }
  }
})

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="todo in todos" :key="todo.text">
    <div @click="toggle(todo)" :class="{ red: todo.done }">
      {{ todo.text }}
    </div>
  </div>
</div>

我可以看到done变量在切换项目时得到了更新，但是视图没有得到更新。我在做什么错了？

Answer 1

您正在为每个待办事项添加属性。要使其具有反应性，您需要使用this.$set。看看有关changes detection caveats的文献。

您的mounted函数应为：

mounted() {
  this.todos.forEach(item => this.$set(item, "done", false));
}

Answer 2

嘿，这是Vue反应性的问题 https://vuejs.org/v2/guide/reactivity.html

您要更改数组中的项目，如果要执行此操作，则需要使用vm。$ set或映射整个数组。

如果您以这种方式执行此操作，vue将无法检测到vue3中可能发生的更改：）

mounted() {
  this.todos.map(item => ({...item, done: false});
}

更改已装入的新变量时，视图不会更新

2 个答案: