VUE 直接經過JS 修改html對象的值致使沒有更新到數據中去

業務場景

咱們在使用vue 編寫 代碼時，咱們有一個 多行文本框控件，但願在頁面點擊一個按鈕 在 文本框焦點位置插入一個 {pk}的數據。

發現插入 這個數據後，這個數據並無同步到 數據中，可是直接經過鍵盤輸入，就能夠改變數據。

緣由分析

在經過 JS 修改控件的value 數據後，並無觸發到數據更新。

解決辦法

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;
            }
        }
    }
})

當文本框獲取焦點時，咱們發佈一個 myfocus 控件，咱們在使用這個控件的時候。

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

編寫一個 getTextarea 的方法。

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

這裏將文本框控件，拋出來，咱們能夠經過 js代碼修改這個控件的value。

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

經過這個代碼咱們往焦點處插入咱們的代碼。

當文本框失去焦點時，將當前控件的值做爲 input 事件進行發佈，從而實現了數據的同步。