What if the Vue component updates the data v-model does not take effect

This article focuses on "Vue components update data v-model does not take effect how to do", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Vue components update data v-model does not take effect what to do"!

Problem description

When using the Vue bi-directional binding (v-model) feature, the wrapper sub-component uses the attributes in the model in the parent component for bi-directional binding through the Inject feature. At this time, the program updates the value of an attribute of model and finds that the sub-component does not render in real time.

Cause analysis

Due to the limitations of JavaScript, Vue cannot detect changes in arrays and objects. Nevertheless, there are some ways to avoid these limitations and ensure their responsiveness.

For details, see matters needing attention in detecting changes.

# # solution there are three ways to solve this kind of object change: method 1

Use Vue.set (object,key,value)

Vue.set (vm.obj, "sex", "man")

Method two

Use this.$set (this.object,key,value)

This.$set (this.obj, "sex", "man")

Method three

Use * * Object.assign ({}, this.obj) * * to reassign values

This.obj.sex = "man"

This.obj = Object.assign ({}, this.obj) at this point, I believe you have a deeper understanding of "Vue component update data v-model does not take effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!