直接修改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: "
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 控件，我們在使用這個控件的時候。
編寫一個 getTextarea 的方法。
var curTextarea=null;
function getTextarea(e){
curTextarea= e.target;
}
這里將文本框控件，拋出來，我們可以通過 js代碼修改這個控件的value。
function insertPK(){
$.insertText(curTextarea,"{pk}")
}
通過這個代碼我們往焦點處插入我們的代碼。
當文本框失去焦點時，將當前控件的值作為 input 事件進行發布，從而實現了數據的同步。
希望本文所述對大家vue.js程序設計有所幫助。
總結
以上是生活随笔為你收集整理的直接修改html文本页面没变化,VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 二分类负采样方法
- 下一篇： 数组添加进formdata_javasc