无效的表达式：意外的标记“。”在原始表达中答案

【问题标题】：invalid expression: Unexpected token '.' in raw expression无效的表达式：意外的标记“。”在原始表达中
【发布时间】：2022-07-01 21:28:15
【问题描述】：

<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>

这给了我这个错误：

 Errors compiling template:

  invalid expression: Unexpected token '.' in

    { form.errors.username[0]: Boolean(form.errors.username[0]) }

  Raw expression: :message="{ form.errors.username[0]: Boolean(form.errors.username[0]) }"

我是 Vue 新手，一直被这个问题困扰。有人可以帮忙吗？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

如果您试图将 message 属性作为一个以 form.errors.username[0] 为键的对象，则需要使用 [ 和 ] 包装它，例如：

:message="{ [form.errors.username[0]]: Boolean(form.errors.username[0]) }">

【讨论】：