Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you about Vue components update data v-model does not take effect how to solve the relevant knowledge points, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Description of the problem that component update data v-model does not take effect

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 object change:

Method one

Use Vue.set (object,key,value)

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

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

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

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

This.obj.sex = "man"; this.obj = Object.assign ({}, this.obj)

Summary: the first two methods use the built-in set method of Vue to trigger the detection of object data, and the third method uses the characteristics of Vue to automatically detect data changes under the follower node.

On the failure of v-model

In parent-child components, such as slot in the table component of iview, compared with the parent-child component where the attachment of table is, the v-model of the parent-child component will not be bidirectional binding, but will only pass values one-way. This is a mechanism problem of vue, because it does not want the child component to pollute the data environment of the parent component, so there are different problems in the one-way transmission, after testing, using on-change,on-blur, etc., if input uses on-change Modifying the data source will result in typing a character, and then updating to the data source bound by v-model, and then due to the update of the data source, it will cause the component to render again, input will lose focus, and the use of v-blur will cause the first click on other buttons to lose the focus of input, the method of performing binding, and the second click will take effect.

Solution.

In particular, declare a new data source, then use on-change to change the new data source, and then assign the new data source to the old data source under specific circumstances, such as submission, so that it will not cause problems.

These are all the contents of the article "how to solve the problem if the Vue component updates the data v-model does not take effect". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.