dynamic css not working on checkbox change vue.js

Question

I'm trying to dynamically change the css of some text in a span when a checkbox is checked using v-on:change but it is not changing and I can't figure out why.

The boolean data property "bolden" does change on-click (checked with console.log) but the class does not. the class does not even appear in the 'span' element tag when checked on devtools in chrome

here is a jsfiddle link of a piece of the code: https://jsfiddle.net/rL0fzv7s/

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="checkbox" value="food" v-model="blog.categories" v-on:change="bolden = !bolden">
  <span v-bind:class="bold">food</span>
</div>
.bold {
  font-weight: bolder;
  font-size: 25px;
  color: red;
}
new Vue({
  el: '#app',
  data: {
    bolden: false,
    blog: {
      title: "",
      content: "",
      categories: []
    }
  },
  computed: {
    bold: function() {
      return {
        bolden: this.bolden
      };
    }
  }
})

Ana Liza Pandac · Accepted Answer · 2019-03-31 14:38:04Z

1

The reason why your styles are not showing even though the value of bolden is changed is that the class name that you are using is .bold but the class name that you are returning from the computed property is called .bolden.

Change your computed bold functions's return value to the following:

computed: {
  bold: function() {
    return {
      bold: this.bolden // class
    };
  }
}

answered Mar 31, 2019 at 14:38

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rori Over a year ago

thank you greatly for the help! works perfectly now

dagalti · Accepted Answer · 2019-03-31 14:37:39Z

0

You should return bold class while this.bolden true. below is the corrected code. Fiddle : https://jsfiddle.net/62mewykL/

 bold: function() {
          return {
            bold: this.bolden
          };
        }

OR

Simply use v-bind:class="{'bold' : this.bolden}" in HTML

answered Mar 31, 2019 at 14:37

dagalti

1,9661 gold badge15 silver badges16 bronze badges

1 Comment

Rori Over a year ago

I'm trying to avoid using the inline method for learning purposes but the first eg works so thank you greatly!

Collectives™ on Stack Overflow

dynamic css not working on checkbox change vue.js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related