Vue+Vuetify中v-date-picker的value类型校验失败问题排查

问题分析 #

控制台抛出的错误明确指出：v-date-picker的value属性类型不符合要求，预期是String或Array，但实际传入了布尔值false。这是因为你在data中给绑定的date字段设置了初始值false，而Vuetify日期选择器并不支持布尔类型的绑定值。

解决方案 #

1. 修正date字段的初始值 #

将data中的date: false改为date: null或date: ''（空字符串），这两种类型都是v-date-picker允许的初始值。

修改后的data片段：

data () {
    return{
        id: null,
        valor: null,
        fecha_inicio: "",
        fecha_fin: "",
        anio: null,
        numeroLiquidacion: null,
        parametro_id: this.valorParametro.parametro_id,
        valorJSON: { },
        listaNumLiquidaciones: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
        fechaManual: false,
        dateFormatted: null,
        label: "Fecha Inicio",
        labelFin: "Fecha Fin",
        value: null,
        fechaReglas: [
            value => {
                const patern = /^(0[1-9]|[1-2]\d|3[01])(\/)(0[1-9]|1[012])\2(\d{4})$/
                if(this.fecha_inicio || this.fecha_fin) return patern.test(value) || 'No es un formato de fecha correcto, use dd/mm/yyyy'
                else return true
            }
        ],
        dateMenu: false,
        dateMenu2: false,
        date: null, // 此处修改为null
    }
},

2. 额外优化提示 #

• 你的parseDate方法是将ISO格式（YYYY-MM-DD）转换为dd/mm/yyyy格式适配文本框显示，但如果用户手动在文本框输入日期，需要补充反向解析逻辑，将dd/mm/yyyy转回ISO格式赋值给date，避免日期选择器出现异常。
• 可以移除v-date-picker上的v-on="$listeners"，如果父组件没有传递额外的事件监听器，这个属性是多余的，可能会引入不必要的事件传递问题。

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