[Vuejs]-Class not dynamically changing with variable in vuejs

by

0👍

If you want a dynamic class you could try something like this:

  <div v-bind:class="[ somethingTrue ? 'styleA' : 'styleB' ]">Some text</div>

Here is a fiddle: https://jsfiddle.net/ku9brr33/

I have further updated the fiddle:
https://jsfiddle.net/ku9brr33/1/

Firstly you are using a tag inside of a button, this I tag is by default ‘inline’ with no content, this means that your I tag will appear invisible… try adding some text in it.

<div id="app">
  <div>
     <button @click="somethingTrue = !somethingTrue" :title="btnTitle"> 
      click me  <i v-bind:class="[ somethingTrue ? 'styleA' : 'styleB' ]">Some text</i>
     </button>
  </div>
</div>

The title attribute is what it shows when you hover over the button (see my example) not the text that gets displayed to the end user.

As you never provided any CSS in your original question its unclear as to what else you are really trying to do here.

Leave a comment