0

我尝试使用库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，单击 Incorrect 并再次执行vm.radioValue。您将看到设置了字符串而不是布尔值。

我试图绑定值（:select-value="true"）。这是一种工作，但是当用户单击“正确”时，另一个按钮（不正确）也处于活动状态。也许这是vue-strap的一个错误......

4

1 回答 1

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>

于 2017-08-02T16:02:08.060 回答