CODEWITHSUNDEEP
vue.js
Adrian Klark
Adrian Klark

Reputation: 133

How do i take radio value checked in vuejs?

I have this code so far, i try to take the value from radio button.I can take from v-model value but with radio i have some problems.For example if i have more radio buttons how i can take the checked one.

new Vue({
el:'#root',
data:{
  removelines: [
  {value:'a'},
  {value:'b'}
  ]

},

methods:{
 insert:function(){
     let vueIn = this; 

     axios.post('/vue', {removelines: vueIn.removelines.value}).then(
       function(response){
         vueIn.removelines = response.data.removelines.value;
       }
     ).catch(function(error){ console.log(error.message); });
   }
}

});

html code here:

<div class="card-block">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-warning active">
            <input  v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="a" checked>
            Yes
        </label>
        <label class="btn btn-warning">
            <input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="b">
            No
        </label>
    </div>
</div>

Upvotes: 2

Views: 23708

Answers (1)

choasia
choasia

Reputation: 10882

Check this working sample, please.

new Vue({
  el: '#root',
  data: {
    removelines: 'b'
  }
});
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="root">
<div class="card-block">
  {{ removelines }}
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-warning active">
            <input  v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="'a'" checked>
            Yes
        </label>
        <label class="btn btn-warning">
            <input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="'b'">
            No
        </label>
    </div>
</div>
</div>

Upvotes: 15

Related Questions