CODEWITHSUNDEEP
vue.js
Adrian Klark
Adrian Klark

Reputation: 133

How to bind classes in vuejs?

I try to bind more classes with v-bind:class i have radio buttons that i want to give some classes from bootstrap when is active like so. I know i don't put the classes succesful.

<div id="app">


        <div  class="btn-group" data-toggle="buttons">
                        <label  :class="{'btn', 'btn-warning', 'active: radio === 1'}">
                            <input  v-model="removelines"  type="radio"  autocomplete="off" v-bind:value="yes" v-on:click="radio = 1">
                            yes
                        </label>

                        <label  :class="{'btn', 'btn-warning', 'active: radio === 2'}">
                            <input v-model="removelines" type="radio"  v-bind:value="no" v-on:click="radio = 2">
                            no
                        </label>
                    </div>

</div>

and

new Vue{(
  el:'#app',
  data:{
    radio: 1
  }

)};

Upvotes: 0

Views: 1114

Answers (1)

Roy J
Roy J

Reputation: 43881

There are several problems with your code. Note that you can set the classes that do not change in the normal way and only associate the :class (which is short for v-bind:class) with the changing class. value can also be done without using the :value form.

You needed a removelines variable for your v-model.

new Vue({
  el:'#app',
  data:{
    radio: 1,
    removelines: 'no'
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-warning" :class="{active: radio === 1}">
      <input v-model="removelines" type="radio" autocomplete="off" value="yes" v-on:click="radio = 1"> yes
    </label>

    <label class="btn btn-warning" :class="{active: radio === 2}">
      <input v-model="removelines" type="radio" value="no" v-on:click="radio = 2"> no
    </label>
  </div>
  <p>Radio is: {{radio}}</p>
  <p>Removelines is: {{removelines}}</p>

</div>

Upvotes: 1

Related Questions