Vue 3 从日期选择器中获取选定的日期

Question

我正在使用 Flowbite Datepicker Plugin 构建一个日期选择器： https://flowbite.com/docs/plugins/datepicker/ 。 这是我的 html 代码：

<form @submit.prevent="checkAvailability" method="POST" class="space-y-6">
   <div class="items-center">
      <label for="start" class="text-sm">Pick Up Date</label>
      <div class="relative mb-4">
         <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
         </div>
         <input datepicker datepicker-autohide v-model="startDate" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
      </div>
   </div>

   <div>
      <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Check Availability</button>
   </div>
</form>

这是我的 Vue JS 代码：

<script>
export default {
    data(){
        return {
            startDate: '',
        }
    },
    methods:{
        checkAvailability(e) {
            console.log("start date", this.startDate);
        }
   }
}

但是，当我尝试在控制台中打印开始日期时，即使我在日期选择器中选择了日期，它也会显示为空。

我曾尝试设置@change 方法，但似乎一旦我设置了日期，onChange 的 function 就不会被调用。

任何帮助都值得赞赏！

Answer 1

不是 100% 确定 - 但插件不会以 vue 方式更新。 我猜这是因为该值是由 javascript 设置的，所以不会引发任何更改事件。
当您单击日期时，看起来“data.startDate”没有更新，但如果您输入某些内容，它将被更改。 您可以做的是“解决方法”，在输入中创建一个 ref

      <input ref="datepicker1" datepicker ...> 

并像这样使用 refs 值

    console.log(this.$refs.datepicker1.value);

只是因为您感谢任何帮助而写作

Answer 2

你如何使 ref 成为反应式？ 例如，如果选择了日期选择器，则将触发更改事件。