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

In this article Xiaobian for you to introduce in detail "VUE through JS to modify the value of the html object led to not updated to the data how to solve", detailed content, clear steps, details handled properly, I hope that this "VUE 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 doubts, the following editor's ideas slowly in-depth, together to learn new knowledge bar.

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}")} read this article, "VUE 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.