Set a boolean from buttonGroup (vue-strap)

Question

I try to use the component buttonGroup from the library vue-strap as a toggle but I can't get it work. I succeed to set string value but not boolean value.

Here is the code

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

The variable radioValue is updated correctly and set to "true" or "false" (string). But now I'd like to set a boolean instead (true or false).

I tried to make a codepen but I can't get it work neither. If it was working, I would tell you to open the console and execute vm.radioValue, click on Incorrect and execute vm.radioValue a second time. You will see that a string is set instead of a boolean.

I tried to bind the value (:select-value="true"). It kind of work but when the user clic on "Correct", the other button (Incorrect) is also active. Maybe it's a bug from vue-strap...

Answer 1

I think a major part of your problem is that you're using vue-strap for Vue 1 (at least in your CodePen).

Since the button-group works with string values and you want a boolean value, you should make a settable computed to use as a proxy, to convert between string and boolean. Then v-model that proxy value in your button-group.

You can also make a component to hide the proxying, see the boolean-button-group in my snippet.

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>