Vue中datepicker插件无法监听datepicker输入框的值问题

这篇文章主要介绍了vue引用第三方datepicker插件无法监听datepicker输入框的值的解决,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、背景

在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化

  

     

export default {  data() {    return {      dateRange: ''    }  },  watch: {    dateRange(newVal, oldVal) {      console.log(newVal) // 选择日期后无法监听dateRange的改变    }  }}

登录后复制

二、分析

查找资料发现:Vue实际上无法监听由第三方插件所引起的数据变化。因此上面的方法是行不通的。但是,Vue给我们提供的一个方法,它可以将任意数据转化为可以被Vue监听到的数据,他就是:vm.$set。

立即学习“前端免费学习笔记(深入)”;

三、解决

以我用到的datepicker为例(jquery-daterangepicker)

data() {    return {      date: '',      beginDate: '',      endDate: ''    }  },mounted () {  $('.daterangepicker').dateRangePicker({    autoClose: true,    format: 'YYYY-MM-DD'  }).bind('datepicker-change', this.setDate) //插件自带方法,选择日期后触发回调 },methods: {  setDate() {    let datepicker = this.$refs.datepicker    //这一步是关键,具体说明可以参见vue api手册    this.$set(this.date, 'beginDate', datepicker.value)    this.$set(this.date, 'endDate', datepicker.value)    this.beginDate = this.date.beginDate.slice(0, 11)    this.endDate = this.date.endDate.slice(-10)  }   },  watch: {  // 这里就可以监听数据变化啦,可以愉快的选择日期了!   beginDate(newVal, oldVal) {     this.$emit( 'beginDateChange', newVal )   },   endDate(newVal, oldVal) {     this.$emit( 'endDateChange', newVal )   }  }

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在微信小程序中如何实现图片预览功能

在微信小程序中如何实现图片预览功能

在微信小程序中如何实现图片预览功能

在微信小程序中如何实现图片预览功能

在微信小程序中如何实现图片预览功能

在微信小程序中如何实现图片预览功能

以上就是Vue中datepicker插件无法监听datepicker输入框的值问题的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3186169.html

(0)
上一篇 2025年3月31日 22:45:03
下一篇 2025年3月31日 22:45:12

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 团购系统源码java开发要掌握哪些技术和工具

    开发一个团购系统的源码需要掌握多种技术和工具,尤其是在java开发环境下。以下是一些关键技术和工具,您可能需要精通: Java编程语言: Java是开发团购系统的核心编程语言。您需要熟练掌握Java的语法和编程概念。 开发框架: Java开…

    2025年4月29日
    000
  • 数据同步APP实时更新的关键技术

    实时数据同步的关键技术涉及多种方面,以下是详细的技术介绍: 实时数据传输协议:WebSocket和Socket.IO等协议支持双向通信,允许服务器与客户端之间建立持久连接,从而实现数据的实时传输。服务器端技术:利用实时数据处理引擎,如Nod…

    2025年4月29日
    000
  • 数据统计系统开发所需的技术框架和工具

    要打造一个卓越的数据统计系统,你首先需要一个坚实的基础——技术框架。它就像是建筑大厦的脚手架,没有它,你的数据统计系统将仅仅是一堆杂乱的代码。 目前市场上有许多流行的框架,例如Apache Hadoop,这是一个开源框架,支持分布式处理大数…

    2025年4月29日
    000
  • 微信小程序的前端框架(如 Taro、uni-app)使用教程

    taro 和 uni-app 是用于开发微信小程序的高效前端框架。1. taro 采用 react 语法,uni-app 基于 vue.js。2. 它们通过编译器将代码转换为各平台原生代码,支持跨平台开发。3. 使用示例包括基本页面创建和复…

    2025年4月28日
    000
  • 哪些小程序框架适合快速开发?

    在移动互联网时代,小程序因其轻量级和即用即走的特性迅速崛起,成为众多企业和个人开发者的首选。然而,对于初学者或希望快速搭建小程序的开发者来说,选择合适的框架至关重要。本文将介绍几个适合快速开发的小程序框架,帮助读者更好地理解并选择合适的工具…

    2025年4月28日
    000
  • 小程序跨平台开发:实现多平台共享

    小程序跨平台开发已成为企业提升效率、节约成本、扩展用户群体的关键策略。本文将详细探讨小程序跨平台开发的概念、优势以及如何通过小程序共享开发实现多平台的无缝对接。小程序跨平台开发是指开发者编写一套代码,通过特定框架和工具的转换,可以在多个平台…

    2025年4月28日
    000
  • 零基础怎样自制小程序?

    小程序作为一种便捷的移动应用形式,越来越受到人们的关注和喜爱。对于零基础的初学者来说,如何自制一个小程序呢?本文将为您提供一些简单的指导步骤。 一、掌握小程序的基本概念 小程序是一种轻量级应用,可以在微信平台上运行,无需下载和安装。它具有类…

    2025年4月28日
    000
  • 可视化微信小程序开发工具的优势有哪些?

    可视化微信小程序开发工具是一款专门为微信小程序开发者设计的无代码开发平台。它提供了可视化界面设计、插件功能开发以及自动代码生成等功能,旨在帮助开发者快速高效地完成小程序开发,节省时间和成本,提升开发效率。 一、可视化微信小程序开发工具的优势…

    2025年4月28日
    000
  • UNIAPP小程序是什么?

    uniapp小程序是一种多平台移动应用开发框架,旨在通过使用一套代码基础来简化开发过程,减少重复代码的编写,从而提升开发效率并降低成本。本文将详细介绍uniapp小程序的特点、优势以及应用场景。 UNIAPP的特点: 多平台兼容性:UNIA…

    2025年4月28日
    000
  • APP开发和小程序开发的平台一样吗?

    随着移动互联网的迅猛发展,移动应用(app)和小程序成为了用户获取服务和信息的主要渠道。虽然app和小程序都是为移动设备设计的应用程序,但在开发平台和技术上存在一定的差异。 APP开发: APP是一款独立的应用程序,需要在操作系统上安装和运…

    2025年4月28日
    000

发表回复

登录后才能评论