CODEWITHSUNDEEP
vuejs2
Krillko
Krillko

Reputation: 645

Vue: Binding radio to boolean

I'm having trouble binding radiobuttons to boolean values in model.

In this example: https://jsfiddle.net/krillko/npv1snzv/2/

On load, the radio radio button is not checked, and when I try to change them, the 'primary' value in model is becomes empty.

I've tried:

:checked="variation.primary == true"

but with no effect.

Upvotes: 28

Views: 28076

Answers (3)

Brad Westness
Brad Westness

Reputation: 1572

I ran into this myself too, the thing to remember is that the value attribute actually shouldn't change for the radio button, what changes (and what you need to bind to) is the checked attribute.

And then you need to handle the change event to set the correct item's value in your data.

Based on your jsFiddle, I think this is what you're looking for:

<div id="l-main">
    <div v-for="(variation, key) in variations">

        <label>

          {{ variation.name }}

          <input 
            type="radio"         
            name="Test"
            :value="key"
            :checked="variation.primary"
            @change="onChange"
            />

        </label>
    </div>

    <br>Output:<br>
    <div v-for="(variation, key) in variations">
        {{ variation.name }} {{ variation.primary }}
    </div>

</div>

var vm = new Vue({
    el: '#l-main',
    data: {
        variations: {
            '41783' : {
                'name': 'test1',
                'primary': false
            },
            '41785' : {
                'name': 'test2',
                'primary': true
            }        
        }
    },
    methods: {
        onChange($event) {  
            // the primary variation is the one whose key
            // matches the value of the radio button that got checked
            for (const key in this.variations) {
                this.variations[key].primary = key === $event.target.value;
            }
        }
    }
});

Upvotes: 0

buckthorn
buckthorn

Reputation: 1837

To bind radio buttons to boolean values instead of string values in Vue, use v-bind on the value attribute:

<input type="radio" v-model="my-model" v-bind:value="true">
<input type="radio" v-model="my-model" v-bind:value="false">

I'll leave it to you to figure out how to match these values with your backend data.

Checkboxes are not so good for this scenario; the user could leave them both blank, and you don't get your answer. If you are asking a yes/no or true/false question where you want only one answer, then you should be using radio buttons instead of checkboxes.

Upvotes: 79

Ikbel
Ikbel

Reputation: 7851

What you are looking for is a checkbox. Here is an updated jsfiddle.

Your use case is not how radio buttons are supposed to work.

Look at this example.

new Vue({
  el: '#app',
  data: {
    picked: 'One',
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br><br>
  <span>Picked: {{ picked }}</span>
</div>

Upvotes: 0

Related Questions