从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-strap 的 bug……

Answer 1

我认为您的问题的一个主要部分是您正在为 Vue 1 使用 vue-strap（至少在您的 CodePen 中）。

由于按钮组使用字符串值并且您需要一个布尔值，因此您应该创建一个可设置的计算值以用作代理，以便在字符串和布尔值之间进行转换。然后对按钮组中的代理值进行 v-model。

你也可以制作一个组件来隐藏代理，见我的sn-p中的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>