Vue Tip: Avoid Empty Class Attributes

If you want to conditionally add a class to an element in Vue, you might be tempted to use a ternary operator to check if a condition is met.

However, this can lead to an empty class attribute being rendered when the condition is false:

<template>
  <div :class="isDisabled ? 'disabled' : null"></div>
  <!-- Will render <div class></div> -->
</template>

Instead, use a falsy value like an empty string to avoid this issue:

<template>
  <div :class="isDisabled ? 'disabled' : ''"></div>
  <!-- Will render <div></div> -->
</template>