如何在vuejs中检查无线电值?

时间:2017-08-14 01:36:28

标签: vue.js

到目前为止,我有这个代码,我尝试从单选按钮获取值。我可以从v-model值获取但是使用无线电我有一些问题。例如,如果我有更多的单选按钮我怎么可以采取检查之一。

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代码:

<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>

1 个答案:

答案 0 :(得分:1)

请检查此工作样本。

new Vue({
  el: '#root',
  data: {
    removelines: 'b'
  }
});
<script src="https://unpkg.com/vue@2.4.2/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>