【问题标题】:How do i take radio value checked in vuejs?我如何在 vuejs 中检查无线电值?
【发布时间】:2017-08-14 01:36:27
【问题描述】:

到目前为止,我有这段代码,我尝试从单选按钮中获取值。我可以从 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>

【问题讨论】:

    标签: vue.js


    【解决方案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>

    【讨论】:

    • @AdrianKlark 我不知道您的方法用于什么以及您使用的端点,我找不到insert 方法与您的问题之间的关系。请更新您的问题描述?
    • 感谢我修改它的接缝 bootstrap js 与其他 js 有冲突
    • 怎么联系你?
    猜你喜欢
    • 2017-10-17
    • 2018-01-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-28
    • 1970-01-01
    • 2021-09-23
    • 2013-08-16
    相关资源
    最近更新 更多