Apply a class using :class

Question

I already saw the docs, but i still didn't figure out how to put this at work, basicly at begin i just want to show a specific class with vue.js that i later wanna change dynamicly, i just wanna set the default behaviour of that class, so i did something like this:

html

<div class="row">
   <h1 class="text-center title">YOU</h1>
   <div class="col-md-offset-1 col-md-10">
      <div :class="progressYou">asd</div>
   </div>
</div>

<div class="row">
    <div class="col-md-offset-1 col-md-10">
        <div :class="progressMonster">asd</div>
     </div>
</div>

css

.progressYou{
    width: '100px';
    background-color: 'green';
    height: '50px';
}

.progressMonster{
    width: '100px';
    background-color: 'green';
    height: '50px';
}

javascript

new Vue({
    el: '#monsterGame',
    data: {
        incrementMonster: 0,
        incrementYou: 0,
        progressMonster: {
            'width': '100px',
            'background-color': 'green',
            'height': '50px'
        },
        progressYou: {
            'width': '100px',
            'background-color': 'green',
            'height': '50px'
        }

    }
})

do i need to attach that in the css?, i basicly want a class on my css and change that dynamcly via the objects that i created on the data in the javascript side, but i can't see anything :S, what am i doing wrong?

Answer 1

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>