vue 3从datepicker中选择日期

Question

我正在使用flowbite datePicker插件构建一个日期选择器： httpps://flowbite.com/docs.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的功能似乎就不会被调用。

任何帮助都得到批准！

Answer 1

不是100％确定的 - 但是该插件不会以VUE方式更新。我猜这是因为该值是由JavaScript设置的，因此不会增加更改事件。
单击日期时，看起来“ data.startdate”似乎不会更新，但是如果输入某些内容，则会更改。
您可以做的是“解决方法”，在输入中进行裁判

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

，并像

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

写作一样使用参考价值，因为您感谢您任何帮助