使用Vue为日期添加天数：设置起始日5天后为到期日代码报错如何解决

报错根因 #

• JavaScript对象字面量中仅支持键: 值的语法定义属性，你代码里混用了=赋值符号，同时不能在对象内部用var关键字声明属性，这是触发Unexpected token 'var'报错的直接原因
• 日期对象构造逻辑错误，生成新日期需要将年、月、日参数传入new Date()构造函数
• 不符合Vue框架规范：组件的data选项必须是返回对象的函数，避免多实例数据共享污染

修复后可运行代码 #

var appdatetimepickerExpireDate = new Vue({
    el: '#appdatetimepickerExpireDate',
    data: function () {
        // 提前在函数内部声明变量计算所需值
        const startDate = appdatetimepickerStartDate;
        const expireDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 5);
        return {
            date: startDate,
            minDate: expireDate
        }
    },
    components: {
        DatePicker: VuePersianDatetimePicker
    }
});

额外注意事项 #

如果appdatetimepickerStartDate是其他Vue实例的响应式数据，建议通过props、事件或者公共状态管理工具传递取值，不要直接读取全局变量，避免出现响应式失效问题。

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