Why v-bind:class not working?

user_7588060 0
Viewed 16530

I'm learning v-bind:class in VueJS but I've encountered some problems with it. Here are my code

var myApp = new Vue({
  el: "#result",
  data: {
    isActive: true
  }
});
.red {
  color: red
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="result">
  <p v-bind:class="{red: isActive}">Hello</p>
</div>

Was there any problems with my code above? As I want the result to be 

<div class="red"></div>

Thanks in advance!

vuejs2 vue.js html jquery javascript
3 Answers

var myApp = new Vue({
  el: "#result",
  data: function(){
    return {
      isActive: true
    }
  }
});
.red {
  color: red
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="result">
  <div v-bind:class="{red: isActive}">Hello</div>
</div>

Data only accepts Function when used in a component definition.

data: function(){
    return {
        isActive: true
    }
}

https://v2.vuejs.org/v2/api/#Options-Data

user_28999380

Clear you cache it will work perfectly.

Check it in Browser Incognito Mode.

user_21301040
Related