VueJS 数组更新错误

Question

我在下面有一个JSFiddle来解释我的问题，但基本上我有一个名为tiles的数组，它有一个标题。当实例created()我向这个数组添加一个名为 active 的字段

然后，我将这个数组输出到一个 <li> 元素中，并遍历它，输出title和active对象。我的问题是，正如您在小提琴中看到的那样，当我运行时v-on:click="tile.active = true" <li> 元素中写入的活动状态没有任何反应

但是如果我运行v-on:click="tile.title = 'test'"它似乎更新了活动对象和标题对象。

它的奇怪行为我似乎无法弄清楚为什么。有人有什么想法吗？

https://jsfiddle.net/jgb34dqo/

谢谢

Answer 1

这与 Vue 不知道你的属性有关，请将你的数组更改为：

tiles: [
  {
    title: 'tile one',
    active: false
  },
  {
    title: 'tile two',
    active: false
  },
  {
    title: 'tile three',
    active: false
  }
]

这允许 Vue 知道活动属性，进而知道监视该变量。

值得

一看的是这个关于 Vue 反应性的链接，因为它有助于理解数据如何以及何时自动变化。

如果必须在之后添加属性

看看$set。它允许您向对象添加道具，然后由 vue 观看。看到这个小提琴，注意变化：

this.tiles.forEach(function(tile) {
  // Tell vue to add and monitor an `active` prop against the tile object
  this.$set(tile, 'active',  false);
}.bind(this))