您好,登錄后才能下訂單哦!
小編給大家分享一下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修改html對象的值導致沒有更新到數(shù)據(jù)中怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。