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.