从buttonGroup（vue-strap）设置一个布尔值

Question

我尝试使用库vue-strap中的组件buttonGroup作为切换，但我无法使它工作。我成功设置字符串值，但不是布尔值。

下面是代码

<button-group v-model="radioValue" type="primary"> 
    <radio selected-value="true">Correct</radio> 
    <radio selected-value="false">Incorrect</radio> 
</button-group> 

可变radioValue正确更新并设置为 “真” 或 “假”（字符串）。但是现在我想要设置一个布尔值（true或false）。

我试图让一个codepen，但我不能得到它的工作都不是。如果这是工作，我会告诉你打开控制台并执行vm.radioValue，点击错误和执行vm.radioValue第二次。你会看到一个字符串被设置而不是布尔值。

我试图值（:select-value="true"）结合。这是一种工作，但当用户点击“正确”时，另一个按钮（不正确）也处于活动状态。也许是从VUE，带一个bug ......

Answer 1

我认为你的问题的一个重要组成部分是，你正在使用VUE，表带的Vue 1（至少在你的CodePen）。

由于按钮组字符串值有效，您想一个布尔值，你应该计算作为代理使用，字符串和布尔之间的转换设定。然后在您的按钮组中对该代理值进行v模型设置。

您也可以让一个组件隐藏代理，请参阅我的片段中boolean-button-group。

var vm = new Vue({ 
 
    components: { 
 
    'buttonGroup': VueStrap.buttonGroup, 
 
    'radio': VueStrap.radio, 
 
    'booleanButtonGroup': { 
 
     template: '<button-group v-model="proxyValue" :type="type"><slot></slot></button-group>', 
 
     props: { 
 
     type: {}, 
 
     value: { 
 
      type: Boolean 
 
     } 
 
     }, 
 
     computed: { 
 
     proxyValue: { 
 
      get() { return this.value.toString(); }, 
 
      set(stringValue) { this.$emit('input', stringValue === 'true'); } 
 
     } 
 
     }, 
 
     components: { 
 
     buttonGroup: VueStrap.buttonGroup 
 
     } 
 
    } 
 
    }, 
 
    el: "#app", 
 
    data: { 
 
    radioValue: false 
 
    }, 
 
    computed: { 
 
    proxyRadioValue: { 
 
     get() { 
 
     return this.radioValue.toString(); 
 
     }, 
 
     set(stringValue) { 
 
     this.radioValue = stringValue === 'true'; 
 
     } 
 
    } 
 
    } 
 
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script> 
 
<script src="//rawgit.com/wffranco/vue-strap/master/dist/vue-strap.min.js"></script> 
 
<div id="app"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <button-group v-model="proxyRadioValue" type="primary"> 
 
     <radio selected-value="true">Correct</radio> 
 
     <radio selected-value="false">Incorrect</radio> 
 
     </button-group> 
 
     {{radioValue}} 
 
     {{radioValue ? 'yes' : 'no'}} 
 
    </div> 
 
    <div class="row"> 
 
    <boolean-button-group v-model="radioValue" type="info"> 
 
     <radio selected-value="true">Correct</radio> 
 
     <radio selected-value="false">Incorrect</radio> 
 
    </boolean-button-group> 
 
    </div> 
 
</div>