VUE directly modifyes the value of the html object through JS, resulting in no update to the data. Solution analysis

This article describes the solution to VUE directly modifying the value of the html object through JS and causing it to not be updated to the data. Share it for your reference, as follows:

Business scenarios

When we are writing code using vue, we have a multi-line text box control that we want to click a button on the page to insert a {pk} data at the focus position of the text box.

After inserting this data, the data is not synchronized into the data, but the data can be changed by directly inputting through the keyboard.

Cause analysis

After modifying the control's value data through JS, data updates are not triggered.

Solution

('rx-textarea', {
 props: {
  value:[String,Number],
  cols: {
   type: Number,
   default: 60
  },
  rows: {
   type: Number,
   default: 4
  }
 },
 data() {
  return {
   curVal:
  }
 },
 template: "<div><textarea class='rx-textarea' v-model='curVal' @focus='focus(event)' :cols='cols' :rows='rows' @blur='change(event)' ></textarea></div>",
 methods:{
  change:function(e){
   this.$emit('input', );
  },
  focus:function(e){
   this.$emit('myfocus', e);
  }
 },
 watch: {
  curVal: function (val, oldVal){
   this.$emit('input', );
  },
  value :function(val,oldVal){
   if(val!=oldVal){
    =;
   }
  }
 }
})

When the text box gets focus, we publish a myfocus control, which we use when we use.

<rx-textarea @myfocus="getTextarea" v-model=""></rx-textarea>

Write a method to getTextarea.

var curTextarea=null;
function getTextarea(e){
 curTextarea= ;
}

Here we throw the text box control, and we can modify the value of this control through js code.

function insertPK(){
 $.insertText(curTextarea,"{pk}")
}

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 enabling data synchronization.

I hope this article will be helpful to everyone's programming.