zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me
HomeArchives

Add data to Vue arrays using this.$set

#vue128
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
This article discusses how to add new reactive properties to nested objects in Vue using the Vue.set() method. It explains that Vue does not allow dynamically adding new root-level reactive properties to already created instances. It also mentions that directly adding objects to an array will not update the view, but using this.$set() can update the view. The provided code example demonstrates how to use this.$set() to add a new property called 'state' to each object in the 'data' array.

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. Instead, you can use the Vue.set(object, key, value) method to add reactive properties to nested objects.

If you directly add objects to an array, the view will not update, but the correct values can be output. Only by using this.$set to override can the view be updated.

 for (let i = 0; i < this.data.length; i++) {
  // this.data[i].state = false;
  this.$set(this.data[i], 'state', false)
}
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.