VUE modified html object by JS values lead directly to the data is not updated to

Business scene

When we use vue write code, we have a multi-line text box control want to click a button on the page in the text box focal position insert a {pk} of data.

After inserting the found data, this data is not synchronized to the data, but directly through the keyboard input, the data can be changed.

Cause Analysis

After modifying the data value control by JS, and there is no trigger to update the data.

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: "<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', 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(val!=oldVal){
                this.curVal=this.value;
            }
        }
    }
})

When the text box gets the focus, we publish a myfocus control, we use this control in time.

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

The method of preparation of a getTextarea.

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

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

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

We insert our code to the focal point by this code.

When the text box loses focus, the current value of the control as the input event publishing, enabling synchronization of data.