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


Posted in Javascript onDecember 02, 2019

本文实例讲述了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: "<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;
   }
  }
 }
})

当文本框获取焦点时,我们发布一个 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 事件进行发布,从而实现了数据的同步。

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

Javascript 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
js解决movebox移动问题
Mar 29 Javascript
jQuery选择器基础入门教程
May 10 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
浅谈javascript错误处理
Aug 11 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
vue 动态表单开发方法案例详解
Dec 02 #Javascript
vue 开发之路由配置方法详解
Dec 02 #Javascript
vue 开发企业微信整合案例分析
Dec 02 #Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 #Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 #Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 #Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 #Javascript
You might like
PHP 字符串 小常识
2009/06/05 PHP
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
js的三种继承方式详解
2017/01/21 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python科学画图代码分享
2017/11/29 Python
python并发和异步编程实例
2018/11/15 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Pycharm安装python库的方法
2020/11/24 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
《木笛》教学反思
2014/03/01 职场文书
学生安全责任书模板
2014/07/25 职场文书
工作保证书怎么写
2015/02/28 职场文书
民事答辩状范本
2015/05/21 职场文书
行政处罚决定书
2015/06/24 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python