When I bind the class attribute to Vuetify’s v-chip, there is to use backtick:

<v-chip small :class=”`${project.status}`“>
{ project.status }
</v-chip>

But if I use the code below, why does it show an error?

<v-chip small :class=”{project.status} “>
{ project.status }
</v-chip>

Solution :

This is invalid syntax in any vue.js version:

<v-chip small :class=”{project.status} “>

v-bind and : colon shorthand expect an expression as a value. `${project.status}` is valid JavaScript expression that is evaluated to stringified project.status value. {project.status} isn’t valid JavaScript expression because it contains extra { and } interpolation delimiters.

A correct vue.js 1.x syntax would be to use interpolation delimiters without v-bind:

<v-chip small class=”{project.status}”>

This syntax has been removed in vue.js 2.

It should be either:

<v-chip small :class=”`${project.status}`“>

Or:

<v-chip small :class=”project.status”>

Notice that they are interchangeable only if project.status is a string.