Vue's v-bind:class does not function properly with the default truthiness evaluation

Question

Vue's v-bind:class does not function properly with the default truthiness evaluation

My v-bind:class code is as follows:

<div v-bind:class="{ showBranding: brandingEnabled }">BRANDING</div>

Even when the value of brandingEnabled in my data changes from true to false, the class remains unaffected.

However, everything works perfectly if I use this code instead:

<div v-bind:class="{ showBranding: (brandingEnabled == 'true') }">BRANDING</div>

Could there be an issue with how booleans are treated as strings? I have attempted setting them to true rather than "true" in my Vue data but it hasn't made a difference.

I've also tried setting the data type as Boolean through props, but that didn't solve the problem either.

If possible, I would prefer to stick with the simple syntax... Any assistance on resolving this issue would be greatly appreciated!

javascript vue.js

Answer 1

Answer №1

If the showBranding attribute is a CSS class, remember to enclose your css className in single quotes, like so:

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

Ensure that your class is defined within a style tag in your component, as shown below:

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

Double check that your brandingIsEnabled data is properly declared within your script tag:

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

This example showcases the single component syntax.

Answer 2

If the showBranding attribute is a CSS class, remember to enclose your css className in single quotes, like so:

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

Ensure that your class is defined within a style tag in your component, as shown below:

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

Double check that your brandingIsEnabled data is properly declared within your script tag:

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

This example showcases the single component syntax.

Answer 3

Answer №2

const app = new Vue({
        el: '#brand',
        data: {
            showBranding: 'brandingClass',
            brandingEnabled:true
        }

    });

CSS Styling

.brandingClass{
  display:none;
}

HTML Markup

<div id="brand">
    <div :class="{ showBranding:brandingEnabled }">BRANDING</div>
</div>

Answer 4

const app = new Vue({
        el: '#brand',
        data: {
            showBranding: 'brandingClass',
            brandingEnabled:true
        }

    });

CSS Styling

.brandingClass{
  display:none;
}

HTML Markup

<div id="brand">
    <div :class="{ showBranding:brandingEnabled }">BRANDING</div>
</div>

Vue's v-bind:class does not function properly with the default truthiness evaluation

Answer №1

Answer №2

Similar questions

Ever since updating my jQuery version to 3.2.1, my ajax code seems to have stopped functioning properly

The lack of synchronization between the updated state in one function and its counterpart is causing discrepancies, resulting in the incorrect information being sent to the API

What is the best way to execute multiple functions in sequence and halt the process if any of them encounter an error?

Having trouble connecting HTML and JS in jsFiddle? Unable to call a basic function using a button?

Issues with connecting to Socket.IO in Cordova app

Obtaining data with jQuery.Ajax technology

Tips for managing Uncaught (in promise) DOMException: An interruption in the play() request due to a pause() call

What is preventing me from retrieving the data stored in my JSON?

Error Occurred While Setting Geolocation in Leaflet Webview Using Javascript/HTML SetView Function

Instructions for exporting specific rows on Datatables: I have incorporated the use of checkboxes for row selection in Datatables

Incorporating useState into React Native navigation screens to dynamically update FlatList items

How to prevent selecting future dates in Material UI date picker

Guide on how to dynamically add AJAX JSON array response to an HTML table

Can SVN hooks be incorporated into NPM in a way that is comparable to git hooks?

Having trouble executing a Vue project as I encountered an error stating: "Module not found: '@vue/cli-plugin-babel'". To fix this, I proceeded to install the necessary dependencies by running the command: npm install

React useState Error: Exceeded maximum re-renders. React enforces a limit on the number of renders to avoid getting stuck in an endless loop

Is it possible to utilize a utility function to modify the state of useState during the

The functioning of JavaScript's ajax capabilities

Tips for utilizing the track OrbitControls in three.js

Yet another method for transferring arguments in typescript