v-calendar如何从API获取默认输入值 无需ref通过组件属性实现

v-calendar 的日期选择器组件默认要求 v-model 绑定值为 Date 对象类型，你初始给 range.start/range.end 赋值空字符串，后续接口返回后又直接赋值自定义格式的 YYYY-MM-DD 字符串，组件无法正确识别值的变更，不会将更新后的值同步到作用域插槽暴露的 inputValue 参数中，所以输入框无法渲染出默认值。
你手动通过 ref 修改 input 元素的 value 只是直接改动了 DOM 显示内容，没有走组件内部的状态更新逻辑，后续操作日期时很容易出现值覆盖、格式错乱的问题，不推荐这么写。

完全不需要操作 DOM，只需要调整两处逻辑即可：

• 初始空值用 null，不要使用空字符串，符合组件的空值类型约定
• 给 v-model 赋值时直接传 Date 对象，输入框的显示格式交给组件的 masks 配置处理，不需要手动转成字符串再赋值

修正后代码 #

脚本代码 #

data(){
   return{
        // 初始空值设为null
        range: {
            start: null,
            end:  null,
        },
        // 配置输入框显示格式
        masks: {
            input: 'YYYY-MM-DD'
        },
        today: new Date()
    }
},
methods:{
    getAPI(){     
        this.$thisIsAPI(Id,Data).then((data)=>{
            // 直接转成Date对象赋值给range，不需要提前转成格式化字符串
            this.range.start = new Date(data.fromDate);
            this.range.end = new Date(data.expireDate);
        });
    },
},
created(){
    this.getAPI();
}

模板代码 #

原有模板的插槽结构不需要改动，只要保证 masks 配置正确，组件会自动按照配置的格式生成 inputValue 传给输入框，接口返回赋值后输入框会自动更新显示内容，不需要任何 ref 相关操作。

如果接口返回的时间本身就是 YYYY-MM-DD 格式字符串，直接传入 new Date() 即可正常解析，不需要额外用 moment 做格式转换，组件会自动处理显示逻辑。

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