vue.js - How to bind classes in vuejs? -


i try bind more classes v-bind:class have radio buttons want give classes bootstrap when active so. know don't put 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   }  )}; 

there several problems code. note can set classes not change in normal way , associate :class (which short v-bind:class) changing class. value can done without using :value form.

you needed removelines variable 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>


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -