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 修改html对象的值导致没有更新到数据中去的更多相关文章
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
- 生成二维码 加密解密类 TABLE转换成实体、TABLE转换成实体集合(可转换成对象和值类型) COOKIE帮助类 数据类型转换 截取字符串 根据IP获取地点 生成随机字符 UNIX时间转换为DATETIME\DATETIME转换为UNIXTIME 是否包含中文 生成秘钥方式之一 计算某一年 某一周 的起始时间和结束时间
生成二维码 /// <summary>/// 生成二维码/// </summary>public static class QRcodeUtils{private static ...
- js修改window对象中的url历史记录
//页面地址:http://localhost/11/account.html//访问页面后,地址变为:http://localhost/11/account.html?type=banana con ...
- js修改伪类的值
css文件 p.change:after { content: attr(data-content); } js文件 $(this).addClass('change').attr('data-con ...
- Js 之获取对象key值
var date = Object.keys(data); Object.keys( ) 会返回一个数组,数组中是这个对象的key值列表 所以只要Object.keys(a)[0], 就可以得只包含一 ...
- jquery 给input text元素赋值,js修改表单的值
简单粗暴: (第一种) $('#checkUserName').attr("value",sessionUser.name); (第二种) $("#checkUserNa ...
- js动态更改对象属性值的方法
下面代码,替换属性名称包含date的属性中的T为空格. for (var o in data) { //console.info(eval("d ...
- js如何将一个json数组对应放置到另一数组中去
需要将上面这个数组的每一个元素对应添加至下面的数组中 最后合成为这样的数组: 使用for循环,将第一个数组中的元素循环到第二个数组中
- 【转】javascript中值传递,地址传递,引用传递的问题(使用js创建list对象时会用到)
function initEditModal_SI(node) { if (node.siArray == undefined) { node.siArray = new Object(); } va ...
随机推荐
- SQL(一)简介
select * from websites 使用的sql为: /* Navicat MySQL Data Transfer Source Server : 127.0.0.1 Source Serv ...
- Pwn-Tell Me Something
题目地址 https://dn.jarvisoj.com/challengefiles/guestbook.d3d5869bd6fb04dd35b29c67426c0f05 先看看位数 64位ELF ...
- 浅谈C++ STL queue 容器
浅谈C++ STL queue 容器 本篇随笔简单介绍一下\(C++STL\)中\(queue\)容器的使用方法和常见的使用技巧.\(queue\)容器是\(C++STL\)的一种比较基本的容器.我们 ...
- 《京东到家订单中心 Elasticsearch 演进历程》----阅读
上篇通过阅读文章对京东到家的架构分析有了初步了解,这次对文章(https://mp.weixin.qq.com/s?__biz=MzU1MzE2NzIzMg==&mid=2247486889& ...
- 修改kile工程名字(转)
假设原来的工程文件名是first,要改成second1.在工程文件目录中,将first.uvopt和first.uvproj名字改成second.uvopt和second.uvproj.2.其他fir ...
- MMM的又一周计划[2019 7.1→2019.7.7]
发现今天是7.1然后又是星期一 来一发吧 本周目标: 1.二分图最佳匹配 2.网络流 3.HH的项链 4.洛谷rk前1000(目前1.1k) (upd:469) 5.AC260(35题,上周A了34, ...
- 【SpringCloud之pigx框架学习之路 】2.部署环境
[SpringCloud之pigx框架学习之路 ]1.基础环境安装 [SpringCloud之pigx框架学习之路 ]2.部署环境 1.下载代码 git clone https://git.pig4c ...
- pip 设置阿里云源
在~/.pip/pip.conf文件中添加或修改 mkdir ~/.pip [global] index-url = http://mirrors.aliyun.com/pypi/simple/ [i ...
- java架构之路-(nginx使用详解)nginx的反向代理和优化配置
书接上回说,nginx我们学会了简单的配置.那么我今天来聊一下,我们ngxin的一些优化配置(我不是很懂,不敢谈高级配置).我先来看一下nginx的好处和正向代理. nginx的好处 1.可以高并发连 ...
- 基于kafka_2.11-2.1.0实现的生产者和消费者代码样例
1.搭建部署好zookeeper集群和kafka集群,这里省略. 启动zk: bin/zkServer.sh start conf/zoo.cfg. 验证zk是否启动成功: bin/zkServer. ...