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

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

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

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

業(yè)務(wù)場景

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

發(fā)現(xiàn)插入這個(gè)數(shù)據(jù)后，這個(gè)數(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;
   }
  }
 }
})

當(dāng)文本框獲取焦點(diǎn)時(shí)，我們發(fā)布一個(gè) myfocus 控件，我們在使用這個(gè)控件的時(shí)候。

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

編寫一個(gè) getTextarea 的方法。

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

這里將文本框控件，拋出來，我們可以通過 js代碼修改這個(gè)控件的value。

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

通過這個(gè)代碼我們往焦點(diǎn)處插入我們的代碼。

當(dāng)文本框失去焦點(diǎn)時(shí)，將當(dāng)前控件的值作為 input 事件進(jìn)行發(fā)布，從而實(shí)現(xiàn)了數(shù)據(jù)的同步。

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

vue中tab選項(xiàng)卡的實(shí)現(xiàn)思路
今天給大家分享vue中tab 選項(xiàng)卡的一些套路，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-11-11
vue3自定義動(dòng)態(tài)不同UI組件篩選框案例
動(dòng)態(tài)組件是一種在Vue中根據(jù)條件或用戶輸入來動(dòng)態(tài)渲染不同組件,本文主要介紹了vue3自定義動(dòng)態(tài)不同UI組件篩選框案例,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-04-04
vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
Vue3中#default=“scope”的使用
在Vue3中,我們經(jīng)常會(huì)遇到需要處理列表渲染的情況,Vue3引入了一種新的語法,即#default=“scope”,本文就來介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下
2023-10-10
WebPack配置vue多頁面的技巧
這篇文章主要介紹了WebPack配置vue多頁面的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
Vue的樣式綁定詳解
這篇文章主要為大家詳細(xì)介紹了Vue的樣式綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
Vue項(xiàng)目中引入ESLint校驗(yàn)代碼避免代碼錯(cuò)誤
這篇文章主要為大家介紹了Vue項(xiàng)目中引入ESLint插件校驗(yàn)代碼避免代碼錯(cuò)誤的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue cli 3.0 搭建項(xiàng)目的圖文教程
這篇文章主要介紹了vue cli 3.0 搭建項(xiàng)目的圖文教程，本文通過圖片文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
解決vue跨域axios異步通信問題
這篇文章主要介紹了解決vue跨域axios異步通信問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04