业务场景

我们在使用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对象的值导致没有更新到数据中去的更多相关文章

  1. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

  2. 生成二维码 加密解密类 TABLE转换成实体、TABLE转换成实体集合(可转换成对象和值类型) COOKIE帮助类 数据类型转换 截取字符串 根据IP获取地点 生成随机字符 UNIX时间转换为DATETIME\DATETIME转换为UNIXTIME 是否包含中文 生成秘钥方式之一 计算某一年 某一周 的起始时间和结束时间

    生成二维码 /// <summary>/// 生成二维码/// </summary>public static class QRcodeUtils{private static ...

  3. js修改window对象中的url历史记录

    //页面地址:http://localhost/11/account.html//访问页面后,地址变为:http://localhost/11/account.html?type=banana con ...

  4. js修改伪类的值

    css文件 p.change:after { content: attr(data-content); } js文件 $(this).addClass('change').attr('data-con ...

  5. Js 之获取对象key值

    var date = Object.keys(data); Object.keys( ) 会返回一个数组,数组中是这个对象的key值列表 所以只要Object.keys(a)[0], 就可以得只包含一 ...

  6. jquery 给input text元素赋值,js修改表单的值

    简单粗暴: (第一种) $('#checkUserName').attr("value",sessionUser.name); (第二种) $("#checkUserNa ...

  7. js动态更改对象属性值的方法

    下面代码,替换属性名称包含date的属性中的T为空格. for (var o in data) {                        //console.info(eval("d ...

  8. js如何将一个json数组对应放置到另一数组中去

    需要将上面这个数组的每一个元素对应添加至下面的数组中 最后合成为这样的数组: 使用for循环,将第一个数组中的元素循环到第二个数组中

  9. 【转】javascript中值传递,地址传递,引用传递的问题(使用js创建list对象时会用到)

    function initEditModal_SI(node) { if (node.siArray == undefined) { node.siArray = new Object(); } va ...

随机推荐

  1. SQL(一)简介

    select * from websites 使用的sql为: /* Navicat MySQL Data Transfer Source Server : 127.0.0.1 Source Serv ...

  2. Pwn-Tell Me Something

    题目地址 https://dn.jarvisoj.com/challengefiles/guestbook.d3d5869bd6fb04dd35b29c67426c0f05 先看看位数 64位ELF ...

  3. 浅谈C++ STL queue 容器

    浅谈C++ STL queue 容器 本篇随笔简单介绍一下\(C++STL\)中\(queue\)容器的使用方法和常见的使用技巧.\(queue\)容器是\(C++STL\)的一种比较基本的容器.我们 ...

  4. 《京东到家订单中心 Elasticsearch 演进历程》----阅读

    上篇通过阅读文章对京东到家的架构分析有了初步了解,这次对文章(https://mp.weixin.qq.com/s?__biz=MzU1MzE2NzIzMg==&mid=2247486889& ...

  5. 修改kile工程名字(转)

    假设原来的工程文件名是first,要改成second1.在工程文件目录中,将first.uvopt和first.uvproj名字改成second.uvopt和second.uvproj.2.其他fir ...

  6. 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, ...

  7. 【SpringCloud之pigx框架学习之路 】2.部署环境

    [SpringCloud之pigx框架学习之路 ]1.基础环境安装 [SpringCloud之pigx框架学习之路 ]2.部署环境 1.下载代码 git clone https://git.pig4c ...

  8. pip 设置阿里云源

    在~/.pip/pip.conf文件中添加或修改 mkdir ~/.pip [global] index-url = http://mirrors.aliyun.com/pypi/simple/ [i ...

  9. java架构之路-(nginx使用详解)nginx的反向代理和优化配置

    书接上回说,nginx我们学会了简单的配置.那么我今天来聊一下,我们ngxin的一些优化配置(我不是很懂,不敢谈高级配置).我先来看一下nginx的好处和正向代理. nginx的好处 1.可以高并发连 ...

  10. 基于kafka_2.11-2.1.0实现的生产者和消费者代码样例

    1.搭建部署好zookeeper集群和kafka集群,这里省略. 启动zk: bin/zkServer.sh start conf/zoo.cfg. 验证zk是否启动成功: bin/zkServer. ...