@vuepic/vue-datepicker时间选择器默认值不显示问题求助

我在项目中使用@vuepic/vue-datepicker库创建了三个选择器实例：日期+时间、日期、时间。其中时间选择器功能异常：当传入默认值时，该值无法在界面上显示。

我的组件源码如下：

<template>
  <Datepicker 
    v-model="time"
    :name="name"
    :defaultvalue="defaultvalue"
    time-picker
    cancelText="Cancel"
    selectText="Select"
  />
</template>

<script>
import { defineAsyncComponent, ref } from 'vue';
import '@vuepic/vue-datepicker/dist/main.css';

export default {
  components: {
    Datepicker: defineAsyncComponent(() => import('@vuepic/vue-datepicker')),
  },
  props: {
    defaultvalue: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  },
  /**
   * Sets up the component based on the provided props.
   *
   * @param {object} props - The props object passed to the component.
   * @return {object} - An object containing the `time` property.
   */
  setup(props) {
    const timeString = props.defaultvalue;
    let time = ref();

    if (timeString !== '') {
      const [hours, minutes, seconds] = timeString.split(':').map(Number);
      time = ref({
        hours: hours,
        minutes: minutes,
        seconds: seconds
      });
    }

    return {
      time,
    };
  },
};
</script>

问题原因分析 #

1. 响应式引用被错误替换
   在setup函数中，你先声明了let time = ref()，之后在if块里又重新执行time = ref({...})——这会直接替换掉原来的响应式引用对象，导致组件无法追踪到新的ref实例，视图自然无法更新。

2. v-model值格式不符合库要求
   @vuepic/vue-datepicker的纯时间选择器（time-picker模式），要求v-model绑定的值是**Date对象**或符合ISO格式的时间字符串，而不是你自定义的{hours, minutes, seconds}对象，库无法识别这种格式并渲染到界面。

3. 无效的defaultvalue属性
   库本身没有defaultvalue这个props，你不需要通过这个属性传默认值，默认值应该直接通过初始化v-model的绑定值来设置。

修复后的代码 #

<template>
  <Datepicker 
    v-model="time"
    :name="name"
    time-picker
    cancelText="Cancel"
    selectText="Select"
    format="HH:mm:ss"
  />
</template>

<script>
import { defineAsyncComponent, ref, watch } from 'vue';
import '@vuepic/vue-datepicker/dist/main.css';

export default {
  components: {
    Datepicker: defineAsyncComponent(() => import('@vuepic/vue-datepicker')),
  },
  props: {
    defaultvalue: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 初始化响应式变量，保持引用不变
    const time = ref(null);
    
    // 初始转换默认时间字符串为Date对象
    if (props.defaultvalue) {
      const [hours, minutes, seconds] = props.defaultvalue.split(':').map(Number);
      const date = new Date();
      date.setHours(hours, minutes, seconds);
      time.value = date;
    }

    // 监听父组件传入的defaultvalue变化，同步更新时间
    watch(() => props.defaultvalue, (newVal) => {
      if (newVal) {
        const [hours, minutes, seconds] = newVal.split(':').map(Number);
        const date = new Date();
        date.setHours(hours, minutes, seconds);
        time.value = date;
      } else {
        time.value = null;
      }
    });

    return {
      time,
    };
  },
};
</script>

修复说明 #

• 保留响应式引用：不再重新赋值time变量，而是修改time.value，确保组件能一直追踪到同一个响应式对象。
• 使用Date对象绑定v-model：通过创建Date实例并设置时分秒，匹配库要求的v-model格式。
• 添加时间格式配置：通过format="HH:mm:ss"指定界面显示的时间格式，和传入的字符串格式保持一致。
• 监听props变化：如果父组件更新defaultvalue，组件能自动同步更新时间选择器的值。

内容的提问来源于stack exchange，提问作者Cañadas Pascal