[Vuejs]-Apply a class using :class

by

2👍

You are using the v-bind:class directive, but your arguments are not classnames, they are style specifications.

Also, your CSS has unnecessary quotes.

new Vue({
  el: '#monsterGame',
  data: {
    incrementMonster: 0,
    incrementYou: 0,
    className: 'progressMonster'
  },
  methods: {
    toggleClass: function () {
      this.className = this.className === 'progressMonster' ? 'progressYou' : 'progressMonster';
    }
  }
})
.progressYou {
  width: 100px;
  color: white;
  background-color: green;
  height: 50px;
}

.progressMonster {
  color: black;
  width: 100px;
  background-color: lightblue;
  height: 50px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="monsterGame">
  <div class="row">
    <h1 class="text-center title">YOU</h1>
    <div class="col-md-offset-1 col-md-10">
      <div :class="[className]">asd</div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-offset-1 col-md-10">
      <div :class="[className]">asd</div>
    </div>
  </div>
  <button @click="toggleClass">Switch</button>
  
  
</div>
👤Roy J

Leave a comment