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知道活动属性，反过来它知道监视该变量。

值得关注这个link about Vue Reactivity，因为它有助于了解数据如何以及何时自动更改。

如果必须在

之后添加属性

看看$set。它允许您向对象添加道具，然后由vue观看。请参阅此fiddle，注意更改：

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))

VueJS阵列更新错误

1 个答案:

如果必须在