139 views
Vue Tip: Avoid Empty Class Attributes
This Vue tip helps to avoid empty class attributes in the rendered HTML
Ask my AI assistant
Michael Hoffmann
@mokkapps
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:
Component.vue
<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:
Component.vue
<template>
<div :class="isDisabled ? 'disabled' : ''"></div>
<!-- Will render <div></div> -->
</template>