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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
js类 from qq
Nov 13 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
浅析node.js的模块加载机制
May 25 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
Python中字符串的修改及传参详解
2016/11/30 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
详解用python生成随机数的几种方法
2019/08/04 Python
django-filter和普通查询的例子
2019/08/12 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
python 实现批量图片识别并翻译
2020/11/02 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
有个性的自我评价范文
2013/11/15 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
军训自我鉴定100字
2014/02/13 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
老公给老婆的保证书
2014/04/28 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
2016新年致辞
2015/08/01 职场文书