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 相关文章推荐
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
js的对象与函数详解
Jan 21 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
8个PHP数组面试题
2015/06/23 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python 一维二维插值实例
2020/04/22 Python
运动会广播稿20字
2014/02/18 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
公证处委托书
2015/01/28 职场文书
综合素质自我评价评语
2015/03/06 职场文书
文明上网主题班会
2015/08/14 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
如何利用React实现图片识别App
2022/02/18 Javascript