VUE通過JS修改html對象的值導致沒有更新到數據中如何解決

這篇文章主要介紹了VUE通過JS修改html對象的值導致沒有更新到數據中如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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 事件進行發布，從而實現了數據的同步。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

關于“VUE通過JS修改html對象的值導致沒有更新到數據中如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“VUE通過JS修改html對象的值導致沒有更新到數據中如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。