VUE 直接通過JS 修改html對象的值導致沒有更新到數(shù)據(jù)中解決方法分析

更新時間：2019年12月02日 11:31:41 作者：自由港

這篇文章主要介紹了VUE 直接通過JS 修改html對象的值導致沒有更新到數(shù)據(jù)中解決方法,結合實例形式詳細分析了VUE使用JS修改html對象的值導致沒有更新到數(shù)據(jù)的原因與解決方法,需要的朋友可以參考下

本文實例講述了VUE 直接通過JS 修改html對象的值導致沒有更新到數(shù)據(jù)中解決方法。分享給大家供大家參考，具體如下：

業(yè)務場景

我們在使用vue 編寫代碼時，我們有一個多行文本框控件，希望在頁面點擊一個按鈕在文本框焦點位置插入一個 {pk}的數(shù)據(jù)。

發(fā)現(xiàn)插入這個數(shù)據(jù)后，這個數(shù)據(jù)并沒有同步到數(shù)據(jù)中，但是直接通過鍵盤輸入，就可以改變數(shù)據(jù)。

原因分析

在通過 JS 修改控件的value 數(shù)據(jù)后，并沒有觸發(fā)到數(shù)據(jù)更新。

解決辦法

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

當文本框獲取焦點時，我們發(fā)布一個 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 事件進行發(fā)布，從而實現(xiàn)了數(shù)據(jù)的同步。

希望本文所述對大家vue.js程序設計有所幫助。

您可能感興趣的文章:

vue使用自定義指令實現(xiàn)拖拽
這篇文章主要為大家詳細介紹了vue使用自定義指令實現(xiàn)拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
VueJs單頁應用實現(xiàn)微信網頁授權及微信分享功能示例
本篇文章主要介紹了VueJs單頁應用實現(xiàn)微信網頁授權及微信分享功能示例，具有一定的參考價值，有興趣的可以了解一下
2017-07-07
vue3封裝Element導航菜單的實例代碼
這篇文章主要介紹了vue3封裝Element導航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導航收縮的詳細代碼,本文通過實例代碼介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-03-03
vue 導航內容設置選中狀態(tài)樣式的例子
今天小編就為大家分享一篇vue 導航內容設置選中狀態(tài)樣式的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
超實用vue中組件間通信的6種方式(最新推薦)
組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用，所以組件間的相互通信是非常重要的，這篇文章主要介紹了vue中組件間通信的6種方式,需要的朋友可以參考下
2022-11-11
關于路由重定向redirect的基本使用
這篇文章主要介紹了關于路由重定向redirect的基本使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Vue項目Element表格對應字段映射顯示方法:formatter格式化數(shù)據(jù)問題
這篇文章主要介紹了Vue項目Element表格對應字段映射顯示方法:formatter格式化數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue實現(xiàn)Tab選項卡切換
這篇文章主要為大家詳細介紹了Vue實現(xiàn)Tab選項卡切換，點擊不同標題顯示對應圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue組件的繼承用法示例詳解
這篇文章主要介紹了Vue組件的繼承用法,本文通過實例代碼案例講解給大家介紹的非常詳細，需要的朋友可以參考下
2022-08-08