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
Post a Comment