微客导航 » 文章资讯 » VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

2023-08-05 03:17:04 332

本文实例讲述了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的方法。

varcurTextarea=null;
functiongetTextarea(e){
curTextarea=e.target;
}

这里将文本框控件，抛出来，我们可以通过js代码修改这个控件的value。

functioninsertPK(){
$.insertText(curTextarea,"{pk}")
}

通过这个代码我们往焦点处插入我们的代码。

当文本框失去焦点时，将当前控件的值作为input事件进行发布，从而实现了数据的同步。

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

热门推荐

随机推荐