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 相关文章推荐
Knockout数组(observable)使用详解示例
Nov 15 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
Node.js文件操作详解
Aug 16 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JS中的三个循环小结
Jun 20 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
js实现秒表计时器
Dec 16 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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生成静态页面详解
2006/11/19 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python简单读取json文件功能示例
2017/11/30 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Python类成员继承重写的实现
2020/09/16 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
干部培训工作总结2015
2015/05/25 职场文书
导游词之山东八大关
2019/12/18 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers