vue.js - How Can I Add my Custom Classes To a Dynamically Class in Vue JS

Question

I want to add a dynamically class to my class List when I used :class I receive a parcing error: Unexpected token font.

<h1 class="flex-auto text-xl font-semibold text-gray-800 player-name <!--dynamic class here-->">
       {{player.name}}
</h1>
<h4 class="text-xl font-semibold text-gray-500 player-team">
      {{player.team}}
</h4>

question from:https://stackoverflow.com/questions/65900535/how-can-i-add-my-custom-classes-to-a-dynamically-class-in-vue-js

Answer 1

You can pass an object with the keys being the classes and the value being true or false to enable/disable it.

<h1 :class="{'flex-auto text-xl font-semibold text-gray-800 player-name': true 'dynamic': someDataProperty}">
       {{player.name}}
</h1>

I set the classes you had normally to the boolean literal 'true' so they are always enabled, and I set the dynamic property to a data property which should be a boolean.