I am using VueJs and I have an array of objects. What i want to do is update an object in the array based on its index. For that I've written a method:
updateRow(index) {
this.inputs[index]={ "one": "test", "two": "test" }
}
However, the object just doesn't update. I've created the following jsbin for it.
https://jsbin.com/boturuluxe/1/edit?html,js,console,output
Any help is appreciated.
Due to limitations in JavaScript, Vue cannot detect the following changes to an array:
When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
When you modify the length of the array, e.g. vm.items.length = newLength
The solution is:
this.$set(this.inputs, index, { "one": "test", "two": "test" })
Use this
updateRow(index) {
Vue.set(this.inputs, index, { "one": "test", "two": "test" })
}
You can do:
updateRow(index) {
this.inputs[index]={ "one": "test", "two": "test" };
this.inputs = Object.assign({}, this.inputs);
// assigning a new object reference
}Or,
updateRow(index) {
this.$set(this.inputs, index, { "one": "test", "two": "test" });
}