Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue: Binding radio to boolean

Tags:

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.

like image 784
Krillko Avatar asked Jul 19 '17 09:07

Krillko


People also ask

What is @input in VUE JS?

It provides two-way data binding by binding the input text element and the value binded to a variable assigned.

What does V-bind do in Vue?

The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is binded to our data defined in Vuejs instance then dynamically changes can be observed as data changes.

What is two-way binding in Vue?

The v-model directive makes two-way binding between a form input and app state very easy to implement. One can bind a form input element and make it change the Vue data property when the content of the field changes.

What is v-model lazy?

lazy. By default, v-model syncs with the state of the Vue instance (data properties) on every input event - which means every single time the value of our input changes. The . lazy modifier changes our v-model so it only syncs after change events. The change event is triggered when a change is commited.


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

like image 155
buckthorn Avatar answered Oct 09 '22 06:10

buckthorn