How to avoid empty class in Vue with null
Published in
4 min readAug 5, 2020
Instead of passing an empty string, which can lead to an empty class in the DOM output. In your ternary operator, you can return “null”. This will ensure no empty class in the DOM 🌟
<!-- ❌ -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> --><!-- ✅ -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->
Table of Content
− Comparing Empty String ‘’ vs null
−− Scenario 1: Using Empty String ‘’
−− Scenario 2: Using null
−− Scenario 3: using undefined
−− Falsy Values
− Refactoring with Object Syntax
− Using && to set class
−− Example A: isBold equals false
−− Example B: isBold equals null
− Is Empty Class Attribute Bad?
−− BUT…
− Conclusion
− Community Input
Comparing Empty String '' vs null
Let’s dig into the above example, and see a more complete picture of what’s going on.
