Vue2中父组件methods无法修改自定义日期选择器v-model值的问题

核心原因 #

• jQuery Bootstrap Modal的DOM渲染时机与Vue响应式周期不匹配：调用modal('show')后，弹窗DOM尚未完成渲染，此时修改calendarDate，自定义日期选择器组件可能未完成挂载，无法响应数据变化。
• 自定义date-picker-calendar组件的v-model实现可能存在缺陷，未正确监听父组件传入值的变化。

解决方案 #

方案一：等待弹窗渲染完成后更新数据 #

利用Bootstrap Modal的shown.bs.modal事件，确保弹窗完全显示、DOM渲染完成后再修改数据：

methods:{
    show:function (form) {
        const $modal = $(this.$el);
        $modal.modal('show');
        
        // 监听弹窗显示完成事件，仅触发一次
        $modal.one('shown.bs.modal', () => {
            this.calendarDate = ['2022/10/05', '2022/10/10'];
            // 同步到form对象（如果需要）
            this.form.start_date = this.calendarDate[0];
            this.form.end_date = this.calendarDate[1];
        });
    },
}

方案二：修复自定义日期选择器的响应式逻辑 #

如果date-picker-calendar是自定义组件，需确保它能正确监听父组件传入值的变化：

// 自定义date-picker-calendar组件内部代码示例
Vue.component('date-picker-calendar', {
    props: ['value'],
    data() {
        return {
            internalDate: this.value
        }
    },
    watch: {
        // 监听父组件传入的value变化，同步到内部状态
        value(newVal) {
            this.internalDate = newVal;
            // 同步更新日期选择器的DOM显示（根据实际使用的日期插件调整）
            // 例如：$(this.$el).datepicker('setDate', newVal);
        }
    },
    methods: {
        onDateChange(newDate) {
            this.internalDate = newDate;
            // 触发input事件，同步到父组件的v-model
            this.$emit('input', newDate);
        }
    }
})

方案三：替换为Vue封装的Bootstrap组件（推荐） #

使用vue-bootstrap这类Vue生态的Bootstrap组件库，完全用Vue的数据驱动逻辑控制弹窗和日期选择器，从根源避免jQuery DOM操作与Vue响应式的冲突。

额外注意事项 #

• 确保calendarDate的初始值类型与后续赋值类型一致（比如初始为数组就不要改为字符串），否则Vue响应式可能失效。
• 若使用watch监听calendarDate，需确保监听逻辑能正确处理数组变化。

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