本文小編為大家詳細(xì)介紹“VUE通過(guò)JS修改html對(duì)象的值導(dǎo)致沒(méi)有更新到數(shù)據(jù)怎么解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“VUE通過(guò)JS修改html對(duì)象的值導(dǎo)致沒(méi)有更新到數(shù)據(jù)怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

成都創(chuàng)新互聯(lián)公司是專業(yè)的烏拉特后網(wǎng)站建設(shè)公司，烏拉特后接單;提供網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行烏拉特后網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

業(yè)務(wù)場(chǎng)景

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

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

原因分析

在通過(guò) JS 修改控件的value 數(shù)據(jù)后，并沒(méi)有觸發(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: "
",
 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 控件，我們?cè)谑褂眠@個(gè)控件的時(shí)候。

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

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

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

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

讀到這里，這篇“VUE通過(guò)JS修改html對(duì)象的值導(dǎo)致沒(méi)有更新到數(shù)據(jù)怎么解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。