Shulou(Shulou.com)05/31 Report--

In this article Xiaobian introduced in detail for you "VUE directly through JS to modify the value of the html object caused by not updated to the data how to solve", detailed contents, clear steps, details handled properly, I hope that this article "VUE directly through JS to modify the value of the html object led to not updated to the data how to solve" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Business scenario

When we write code in vue, we have a multiline text box control that we want to insert {contention} data at the focus of the text box by clicking a button on the page.

It is found that after the data is inserted, the data is not synchronized into the data, but the data can be changed by entering it directly through the keyboard.

Cause analysis

After the control's value data is modified through JS, no data update is triggered.

Solution.

Vue.component ('rx-textarea', {props: {value: [String,Number], cols: {type: Number, default: 60}, rows: {type: Number, default: 4}}, data () {return {curVal:this.value}}, template: ", methods: {change:function (e) {this.$emit (' input', e.target.value)) }, focus:function (e) {this.$emit ('myfocus', e);}}, watch: {curVal: function (val,oldVal) {this.$emit (' input', this.curVal);}, value: function (val,oldVal) {if (validated roomoldVal) {this.curVal=this.value;})

When the text box gets focus, we release a myfocus control that we use when we use it.

Write a method for getTextarea.

Var curTextarea=null;function getTextarea (e) {curTextarea= e.target;}

Here the text box control is thrown out, and we can modify the value of the control through the js code.

Function insertPK () {$.insertText (curTextarea, "{Competition}")}

Through this code, we insert our code into focus.

When the text box loses focus, the value of the current control is published as an input event, thus achieving data synchronization.

Read here, the "VUE directly through JS to modify the value of the html object resulting in not updated to the data how to solve" the article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to 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.