从 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[=28= 】第二次。您会看到设置的是字符串而不是布尔值。

我尝试绑定值 (:select-value="true")。它有点工作，但是当用户点击 "Correct" 时，另一个按钮（不正确）也处于活动状态。可能是 vue-strap 的 bug...

Answer 1

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

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

您还可以创建一个组件来隐藏代理，请参阅我的代码段中的 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>

从 buttonGroup (vue-strap) 设置一个布尔值

Set a boolean from buttonGroup (vue-strap)

vue.js

vue-strap