In the work encountered such as the problem described in the title, also do not report mistakes, puzzled, after the search, hereby record

I want to add a URL attribute to DoubanMovie, as shown in the following error example

This.doubanmovie. url="1111"// Error exampleCopy the code

This is a wrong example, you cannot directly modify the attribute of the variable in data. In this way, although the URL attribute is added to the variable of DoubanMovie, no error will be reported, but the page will not be refreshed, which will not achieve the desired effect

To solve this problem, we can do the following

Reassign data, doubanMovie overwrites

this.doubanmovie = { ... Url:""
}
// Correct example, you need to reassign doubanMovie
Copy the code

Use $forceUpdate() to force a data refresh

this.doubanmovie.url="1111"
this.$forceUpdate(); // Correct example
Copy the code

Vue.set

Definition: Vue does not allow you to dynamically add root-level reactive properties to an already created instance. However, it can use the vue.set (Object, key, value) method to add response properties to nested objects

Vue. Set (target, key, value)

Parameter Description:

Parameter description: target: data source to be changed, key: data to be changed or added, value: value to be changed

Vue.set(this.doubanmovie,'url'.'111') // Correct example
Copy the code