Vue模板编译报invalid expression: Unexpected token '.'错误如何解决

这是JavaScript对象字面量的语法规则限制导致的编译错误：

• 在JavaScript对象语法中，只有固定的合法标识符、加引号的静态字符串可以直接作为键名写在冒号左侧。如果键名是动态取值的表达式、或者键名本身包含点号、方括号这类特殊字符，必须使用计算属性名语法，也就是用方括号把键的表达式包裹起来，否则编译器解析到特殊字符时会直接判定语法非法。
  你代码里:type绑定的对象键是写死的字符串'is-danger'，符合静态键名规则所以不会报错；但:message绑定的对象直接把form.errors.username[0]这个带有点、方括号的动态取值表达式写在了键的位置，编译器解析到第一个点号时就抛出了Unexpected token '.'的错误。

两种方案都可正常运行，按需选择即可：

方案1：模板内直接修正语法（最小改动） #

给作为键名的动态表达式套上计算属性名要求的方括号即可，修改后的代码如下：

<b-field 
  label="Username" 
  :type="{ 'is-danger': Boolean(form.errors.username[0]) }" 
  :message="{ [form.errors.username[0]]: Boolean(form.errors.username[0]) }"
>
    <b-input v-model="form.values.username" placeholder="Username"></b-input>
</b-field>

注意：如果form.errors.username为空或者不存在时，form.errors.username[0]的取值是undefined，最终生成的对象键名会是字符串"undefined"，如果组件对空错误场景的处理不符合预期，可以用方案2做兼容。

方案2：逻辑层提前处理消息对象（更易维护） #

把错误消息对象的生成逻辑挪到脚本的计算属性里，模板只做简单绑定，后续扩展校验逻辑更方便：
首先在组件的computed节点定义计算属性：

computed: {
  usernameFieldMessage() {
    const firstError = this.form.errors.username?.[0]
    // 没有错误时返回空对象，有错误时返回以错误信息为键、true为值的对象
    return firstError ? { [firstError]: true } : {}
  },
  usernameFieldType() {
    return this.form.errors.username?.[0] ? 'is-danger' : null
  }
}

模板里直接绑定对应计算属性即可：

<b-field 
  label="Username" 
  :type="usernameFieldType" 
  :message="usernameFieldMessage"
>
    <b-input v-model="form.values.username" placeholder="Username"></b-input>
</b-field>

这种写法还加了可选链?.做兼容，就算form.errors.username不存在也不会报读取0属性的错误，鲁棒性更好。

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