Vue中data数据,使用v-model属性绑定第三方插件(例如Jquery的日期插件)无法自动更新
问题原因就是html结合Vue使用,但是项目又使用了第三方日期控件,这会导致日期值选择形式的更新后,而Vue管理的对应v-model字段并未自动更新,这是因为日期控件未触发Input事件,需要我们在值更新后手动触发Input事件。
这里需要一个注意点,就是不要使用Jquery的trigger方法进行触发事件,因为Vue的v-model的input事件绑定的形式是通过原生绑定的;而我认为 Jquery.trigger(eventName) 只能触发由Jquery通过jquery.on函数进行绑定的事件。
let test = document.querySelector("#test")
// Jquery 绑定事件
$(test).on("input",()=>console.log("Jquery Event 01"))
// Js 绑定事件
test.addEventListener("input",()=>console.log("Js Event 02"))
// Jquery 触发事件
$(test).trigger("input") // 这里应该只打印了 ”Jquery Event 01“ 信息,而JS原生绑定的事件并未触发
// JS 触发事件
test.dispatchEvent(new Error("input")) // 这里应该先后触发了Jquery和JS的Input事件
由此示例可以说明,如果需要触发原生绑定的事件,需要使用dispatchEvent进行触发
总结就是,如果想让Vue响应Input事件的v-model字段的更新,需要触发原生的事件即可。。。
附上Vue集成第三方日期控件不自动更新值的解决方法:
第三方日期Jquery控件:http://www.malot.fr/bootstrap-datetimepicker
解决方案:
1.在bootstrap-datetimepicker.js文件里定位到 _setDate 方法

this.element.get(0).dispatchEvent(new Event("input"))
Vue中data数据,使用v-model属性绑定第三方插件(例如Jquery的日期插件)无法自动更新的更多相关文章
- VUE:data数据中,能被网页渲染出来的数据类型有哪些
我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- vue中关于v-for性能优化---track-by属性
vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有 ...
- es6中的Proxy和vue中的数据代理的异同
1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...
- android data binding jetpack V 实现recyclerview 绑定
android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- Vue中data重置问题
Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...
- 怎样简单灵活地将DataTable中的数据赋值给model
最近在做的一个项目中,有13个方法都需要用到同一种处理方式:通过SQL语句从数据库获取一条指定的数据,并将该数据中的每个值都赋值给一个model,再将这个model中的数据通过微信发送出去.每个方法都 ...
- DataTable中的数据赋值给model z
create table memberinfo ( member_id int, member_name varchar(20), member_birthday varchar(50) ) go / ...
随机推荐
- Python 随机(random)模块的不可预测之美
1 . 概念 1.1 真.伪随机数 大部分的计算机语言都会提供 API 生成随机数,此类 API 称为随机数生成器. 计算机可以用随机数模拟现实世界中的各种随机概率问题,没有随机生成器的编程语言不是& ...
- excel制作折线图太麻烦?试试这些折线图在线生成工具
折线图是以折线的上升或下降来表示统计数量的增减变化的统计图,叫作折线统计图.用折线的起伏表示数据的增减变化情况,不仅可以表示数量的多少,而且可以反映数据的增减变化情况.并且折线图也是目前最方便的一种统 ...
- ASP.NET Core 6框架揭秘实例演示[13]:日志的基本编程模式[上篇]
<诊断跟踪的几种基本编程方式>介绍了四种常用的诊断日志框架.其实除了微软提供的这些日志框架,还有很多第三方日志框架可供我们选择,比如Log4Net.NLog和Serilog 等.虽然这些框 ...
- 巧用 CSS 实现炫彩三角边框动画
最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现: 很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常 ...
- DBCHM -最简单、最实用的数据库文档生成工具
项目介绍 DBCHM 是一款数据库文档生成工具! 该工具从最初支持chm文档格式开始,通过开源,集思广益,不断改进,又陆续支持word.excel.pdf.html.xml.markdown等文档格式 ...
- VisualStudio2019 利用代码片段管理器新建快捷命令
原文:https://www.cnblogs.com/huguodong/p/12694902.html 一.前言 VisualStudio 可以通过敲出缩写字符串,然后按两次Tab按键自动展开成一段 ...
- vmware扩容centos根目录
在vmware中编辑,给磁盘扩容 在centos中使用命令fdisk /dev/sda 输入n创建新分区 输入p创建主分区 回车,默认分区号 回车,默认起始扇区 回车,默认last扇区 输入t,改变分 ...
- Windows Server 2012 在桌面上显示”我的电脑”
转至:https://jingyan.baidu.com/article/f25ef2544f6883482c1b82e5.html Windows Server 2012 沒有快捷方式显示我的电脑到 ...
- ubuntu 下的ftp安装及root身份远程配置
第一步:在 Ubuntu 中安装 VSFTPD 服务器 //安装 VSFTPD 二进制包 $ sudo apt-get update $ sudo apt-get install vsftpd //使 ...
- lsof、tcpdump和wireshark
lsof:https://www.jianshu.com/p/a3aa6b01b2e1 tcpdump:https://linux.cn/article-10191-1.html wireshark: ...