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 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
vue.js删除列表中的一行
Jun 30 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
php中final关键字用法分析
2016/12/07 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python3.6正式版新特性预览
2016/12/15 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
制衣厂各岗位职责
2013/12/02 职场文书
社会保险接收函
2014/01/12 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
晚会开幕词
2015/01/28 职场文书
会计岗位职责范本
2015/04/02 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers