Vue 2中Flowbite Datepicker：如何让$refs成为响应式数据？

1. 修复模板语法错误 #

你的模板代码里@change="startTrigger>存在语法遗漏，缺少闭合的引号，正确写法应为@change="startTrigger"。不过这并非核心问题，因为flowbite-datepicker的日期选择事件通常需要通过初始化配置来监听。

2. 使用组件自带回调监听日期选择 #

flowbite-datepicker的DatePicker实例支持通过配置项设置onSelect回调，这是监听日期选择的标准方式——用户通过选择器选中日期时，该回调会稳定触发，避免原生change事件可能不触发的问题。

修正后的完整代码：

<template>
  <div>
    <input id="datepicker" ref="startDate" type="text">
  </div>
</template>

<script>
import DatePicker from 'flowbite-datepicker/DatePicker'

export default {
  mounted() {
    // 初始化日期选择器并绑定选择回调
    new DatePicker(this.$refs.startDate, {
      onSelect: (datepicker) => {
        const selectedDate = datepicker.el.value
        console.log('选中的日期:', selectedDate)
        this.startTrigger(selectedDate)
      }
    })
  },
  methods: {
    startTrigger(date) {
      console.log('处理选中日期:', date)
    }
  }
}
</script>

3. 额外场景处理 #

如果需要同时监听用户手动输入内容的变化，可保留@change事件（确保语法正确）：

<input id="datepicker" ref="startDate" type="text" @change="startTrigger($event)">

对应修改方法：

startTrigger(event) {
  console.log('手动输入内容:', event.target.value)
}

内容的提问来源于stack exchange，提问作者Roslan Saidi