Vue.js动态对象属性赋值触发SyntaxError: Unexpected token问题咨询

报错原因 #

JavaScript 中点号（.）属性访问语法仅支持后跟固定的标识符字面量，不允许直接使用模板字符串、变量等表达式作为属性名，因此你的原有写法会触发语法错误。

解决方案 #

使用方括号属性访问语法即可实现动态属性名赋值，方括号内可以传入任意合法的JS表达式（包括变量、模板字符串、运算结果等），修改后的代码如下：

this.product.taxons.forEach((taxon) => {
    // taxon = 'bed_sheet'
    const data = this.taxons.find((x) => x.value === taxon);
    // 新增空值判断，避免find未匹配到对应项时访问data.model报错
    if (data) {
        this.currentProduct[data.model] = true;
    }
});

如果有属性名拼接需求（比如需要加固定前缀/后缀），也可以直接在方括号内使用模板字符串：

// 示例：给属性名拼接固定前缀
this.currentProduct[`taxon_${data.model}`] = true;

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