invalid expression: Unexpected token '.' in raw expression

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

>Solution :

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