业务场景

我们在使用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. arm-linux-gcc-5.4.0安装方法

    首先需要下载arm-linux-gcc的安装包 这里提供一个5.4.0版本的安装包,如有需要自行下载. 下载链接:https://pan.baidu.com/s/1prpdmVNWBFzg79OXQs ...

  2. python简单面试题

    在这个即将进入金9银10的跳槽季节的时候,肯定需要一波面试题了,安静总结了一些经常遇到的python面试题,让我们一起撸起来. python面试题 1.求出1-100之间的和 # coidng:utf ...

  3. 在python的虚拟环境venv中使用gunicorn

    昨天遇到的问题,一个服务器上有好几个虚拟机环境. 我active进一个虚拟环境,安装了新的三方库之后, 使用gunicorn启动django服务, 但还是死活提示没有安装这个三方库. 一开始没有找到原 ...

  4. Div转为Canvas简直不要太好玩~~~

    html2canvas库 今天发现了一个神奇的玩意,简直不要太好玩~~ 用canvas做动画是很难,但是div能比canvas简单不少,只是因为canvas中不能操作Dom元素 这款神器,可以直接将D ...

  5. python3.5.3rc1学习二

    #if else示例x = 5y = 8 if x > y: print("x is greater than y")else: print("x is not g ...

  6. python 画小猪佩奇

    转自:python画个小猪佩奇 # -*- coding: utf-8 -*- """ Created on Mon May 20 11:36:03 2019 @auth ...

  7. day53_9_17 django数据库表关联,路由和视图

    一.数据库的关系建立. 在原生的数据库语句中,建立表与表之间的联系,就是添加一个字段,将联系的表的id值添加到该字段中. django所作的也就是这些. 以图书管理系统为例,图书管理系统有四张表:书籍 ...

  8. 第一次作业--Numpy练习

    1.创建一个边界值为1而内部都是0的数组,图例如下:[提示:]解此题可以先把所有值都设置为1,这是大正方形:其次,把边界除外小正方形全部设置为0.本题用到numpy的切片原理.多维数组同样遵循x[st ...

  9. 关于一个.2lf和.2f的战争!(貌似书上错了,静待打脸。)

    在山东理工oj上做题,谈到了输入数据... double i: scanf(“%lf”,&i): 谨记呀,lf时,可以输入任何类型的数据,而.2f,只能输入符合其规格的数据. 再谈输出,dou ...

  10. Qt 删掉资源qss后报错

    Error: dependent '..\..\........XXXX.qss' does not exist. 解决方案: 1.清理工程 2.qmake 3.重新构建