Question

我正在使用VueJ，并且我有一个对象数组。我想做的是根据其索引更新数组中的对象。为此，我编写了一个方法：

updateRow(index) {
      this.inputs[index]={ "one": "test", "two": "test" }
    }

但是，对象只是不更新。我为此创建了以下jsbin。

https://jsbin.com/boturuluxe/1/edit?html,js,console,output

感谢您的帮助。

Answer 1

由于JavaScript的限制，Vue无法检测到对数组的以下更改：

直接用索引设置项目时，例如vm.items [indexOfItem] = newValue
当您修改数组的长度时，例如vm.items.length = newLength

解决方案是： this.$set(this.inputs, index, { "one": "test", "two": "test" })

Read more here

Answer 2

使用此

updateRow(index) {
  Vue.set(this.inputs, index, { "one": "test", "two": "test" })
}

Answer 3

您可以这样做：

updateRow(index) {
  this.inputs[index]={ "one": "test", "two": "test" };
  this.inputs = Object.assign({}, this.inputs);
  // assigning a new object reference
}

或者，

updateRow(index) {
  this.$set(this.inputs, index, { "one": "test", "two": "test" });
}

Vue docs reference

Vuejs-更新数组中的对象

3 个答案: