invalid expression: Unexpected token '.' in raw expression-CodePudding

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

This is giving me this error:

 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]) }"

I am new to Vue and have been stuck on this problem. Can anyone please help?

CodePudding user response：

if you are trying to have the message prop being an object having form.errors.username[0] as a key, you need to wrap it with [ and ] eg:

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