Vue: Binding radio to boolean

user_1017767 0
Viewed 21072

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.

vuejs2
4 Answers

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.

user_9220320

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;
            }
        }
    }
});
user_1998040
Related