Vue2搭配Laravel使用datepicker时，切换输入框后日期绑定值丢失

该问题本质是jQuery直接操作DOM的日历插件与Vue响应式双向绑定的天然冲突，触发逻辑如下：

• mounted钩子中初始化的bootstrap-datepicker会直接修改原生输入框的DOM值，这个操作不会触发Vue用来同步数据的原生input事件，导致Vue内部维护的对应form字段值始终为初始空字符串。
• 日期输入框上写了Blade模板输出的静态value属性，进一步打乱了Vue对输入框真实值的跟踪。
• 当在其他输入框输入内容触发Vue重渲染时，Vue会把内部记录的空绑定值重新写回日期输入框的DOM，最终表现为已填的日期被清空。

1. 移除干扰绑定的冗余属性 #

• 删掉日期输入框上的静态value="{{ old('xxx') }}"属性，所有初始值统一通过Vue的data定义传入，避免静态属性被Vue重渲染覆盖。
• 保留输入框原有的name属性作为字段映射标识，无需修改原有DOM结构。

2. 打通日历插件与Vue的事件同步 #

不要依赖原生v-model自动同步日历插件的DOM修改，主动在事件回调中将输入框的真实值同步回Vue的响应式数据，核心初始化代码如下：

mounted: function (){
    const self = this
    $('.demoDate2').datepicker({
        format: "dd-mm-yyyy",
        autoclose: true,
        todayHighlight: true,
        orientation: "bottom auto"
    // 同时监听日历选中事件、输入框原生input事件，覆盖选日期、手动输入、手动清空三个场景
    }).on('changeDate input', function(){
        // 取当前输入框的name属性，映射到form里的同名字段
        const fieldName = $(this).attr('name')
        // 把输入框的真实值同步给Vue的响应式数据
        self.form[fieldName] = $(this).val()
    })
}

注：之前绑定的change事件在清空日期时不触发，本质是因为datepicker自带的changeDate事件仅会在插件内部选中日期时触发，手动清空输入框的操作不会触发该事件，必须补充监听原生input事件才能覆盖全场景。

3. 兼容Laravel表单验证回显场景 #

如果需要保留Blade输出的旧表单值（比如验证失败后的回显），把静态值从DOM标签上移到Vue的data初始化阶段，避免被重渲染覆盖：

data: function(){
    return {
        form: {
            memo_no: '{{ old("memo_no") }}',
            memo_date: '{{ old("memo_date") }}',
            from_date: '',
            to_date: '',
            duration: '',
            description: '',
            employees_ids: [],
        },
        errors: []
    }
}

4. 方案生效逻辑 #

原代码中的v-model绑定可以保留，因为通过手动值同步已经保证了Vue内部数据和输入框DOM值的一致性，不会出现绑定冲突。之前尝试同类方案未生效，多数是因为仅监听了changeDate事件，没有覆盖手动输入、清空的场景，导致Vue内部仍然记录旧的空值，重渲染时依然会冲掉输入框内容。

内容的提问来源于stack exchange，提问作者Farhan Ibn Wahid