问题原因就是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的日期插件)无法自动更新的更多相关文章

  1. VUE:data数据中,能被网页渲染出来的数据类型有哪些

    我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...

  2. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  3. vue中关于v-for性能优化---track-by属性

    vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有 ...

  4. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  5. android data binding jetpack V 实现recyclerview 绑定

    android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...

  6. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  7. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  8. 怎样简单灵活地将DataTable中的数据赋值给model

    最近在做的一个项目中,有13个方法都需要用到同一种处理方式:通过SQL语句从数据库获取一条指定的数据,并将该数据中的每个值都赋值给一个model,再将这个model中的数据通过微信发送出去.每个方法都 ...

  9. DataTable中的数据赋值给model z

    create table memberinfo ( member_id int, member_name varchar(20), member_birthday varchar(50) ) go / ...

随机推荐

  1. 面试题(造火箭必备技能):请举例一个最有成就感的性能bug

    当前,绝大部分招聘都有性能要求或者把其作为加分项(会性能优先),哪怕你不是面试的性能,面试的时候可能会问性能,所以大家才会有"面试造火箭,进去拧螺丝"的共鸣.至于企业为什么重视性能 ...

  2. 拒绝踩雷!全能的BI软件非它莫属

    BI工具现在是越来越火了,很多公司都会利用这些工具,提高工作效率.但是目前市面上的BI产品真的是越来越多,稍有不慎就会踩雷,那么我们应该要怎么选择这些BI工具呢?今天我为大家选了3款国内外口碑不错的B ...

  3. 【C# IO 操作 】开篇 IO命名空间的解析

    图片模板下载 System.IO命名空间类分为:文件.驱动 .目录.路径.流.比特率流的操作 驱动类:比较简单,所以就不区分静态和实例操作类,所有的操作合并在DriverInfo类中 路径类:比较简单 ...

  4. .NET组件 vs. COM组件

    本文转载:https://www.cnblogs.com/larissa-0464/p/11095203.html 写在前面:我没有开发过COM组件的经验,只是在做文献综述的时候需要了解这方面的知识, ...

  5. 【C#反射】Assembly

    Assembly属性的应用 //获取当前执行代码的程序集 Assembly assem = Assembly.GetExecutingAssembly(); Console.WriteLine($&q ...

  6. bool 类型位逻辑运算符(| & ^)与条件逻辑运算符(|| &&)的区别

    bool 类型的运算符 & ^|   &&  ||   ! 运算符&&和|| 是短路的,这意味着如果左侧表达式的值足以确定结果,则它们将不会评估其右侧表达式. ...

  7. Ubuntu20.04 Linux初识

    转至:https://www.cnblogs.com/luomit/p/13857574.html Ubuntu简述 Ubuntu是常见的三大操作系统Windows.MacOS.Linux中,linu ...

  8. 路径修改后cmd命令行窗口仍然没有变化的原因

    修改环境变量后,要重启cmd再输入才有用

  9. Python:Scrapy(三) 进阶:额外的一些类ItemLoader与CrawlSpider,使用原理及总结

    学习自:Python Scrapy 爬虫框架实例(一) - Blue·Sky - 博客园 这一节是对前两节内容的补充,涉及内容为一些额外的类与方法,来对原代码进行改进 原代码:这里并没有用前两节的代码 ...

  10. 居然可以像玩游戏一样学Git

    工作中经常用到 git,但是用到的指令也都是比较初级的.简单的.当时学习的过程也是有点痛苦.各种概念理解起来要么靠想象,要么自己创建工程提交记录,然后执行指令,看具体效果.这样学下来是事倍功半. 在搜 ...