[Vuejs]-Vue v-bind:class doesn't work on default truthiness check

1๐Ÿ‘

If showBranding is a CSS class, you have to add single quote around your css className, like this:

<div :class={'showBranding': brandingIsEnabled}>
// content
</div>

Then your class has to be inside a style tag into your component like this:

<style scoped>
 .showBranding {
   // content
 }
</style>

Check also if your brandingIsEnabled data is inside your script tag like this:

<script>
 export default {
  data() {
   return {
    brandingIsEnabled: true       
   }
  } 
 }
</script>

This example uses the single component syntax.

๐Ÿ‘ค96eleven

-2๐Ÿ‘

new Vue({
        el: '#br',
        data: {
            showBranding: 'brandingClass',
            brandingEnabled:true
        }

    });

CSS Code

.brandingClass{
  display:none
}

html code

<div id="br">
    <div :class="{ showBranding:brandingEnabled }">BRANDING</div>
</div>
๐Ÿ‘คOmid Matouri

Leave a comment