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”（字符串）。但是现在我想设置一个布尔值（true或false）。

我试图制作一个codepen，但我也无法让它工作。如果它正常工作，我会告诉您打开控制台并执行 vm.radioValue ，单击“不正确”并再次执行 vm.radioValue 。您将看到设置了一个字符串而不是布尔值。

我试图绑定值（:select-value="true"）。它有点工作，但当用户clic on“Correct”时，另一个按钮（不正确）也是活动的。也许这是vue-strap的错误......

Answer 1

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

由于button-group使用字符串值并且你想要一个布尔值，你应该创建一个settable计算用作代理，在string和boolean之间进行转换。然后在按钮组中对该代理值进行v-model。

您还可以制作一个组件来隐藏代理，请参阅我的代码段中的boolean-button-group。

＆＃13;

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';
      }
    }
  }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: