VueJs bind boolean values to dropdown

Question

I have a dropdown with two options: "True" and "False", when selected, I want the form to save the selected value as a boolean.

So if I check the form value when the user has selected "True", I want the value to be true as a boolean.

<select v-model="selected">
  <option :value="null">Pick a value</option>
  <option v-for="val in options">{{val}}</option>
</select>

...

data() {
 return {
  selected: null,
   options: ["true", "false"]
}

Here is a fiddle of what I am attempting: https://jsfiddle.net/q0nk9h32/5/

How can I output the selected values in their boolean form?

Bonus question: Instead of having the options variable, is it valid syntax / good practice, to do:

v-for="val in ["true", "false"]" ?

It seems overkill to have a variable for this (but it fails in fiddle when I try using an array directly). Thanks!

tony19 · Accepted Answer · 2022-07-15 05:54:34Z

2

You can bind a value to each <option> using :value.

https://v2.vuejs.org/v2/guide/forms.html#Select-Options

new Vue({
    el: '#app',
    data() {
        return {
            selected: null
        }
    }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <select v-model="selected">
        <option :value="null">Pick a value</option>
        <option v-for="val in [true, false]" :value="val">{{val}}!!!</option>
    </select>
    <p>
        Selected is the {{ typeof selected }}: {{ selected }}
    </p>
</div>

You can write the array for a v-for inline if you want. In your original example it wouldn't have worked because you included double quotes around your strings but were already using double quotes around the attribute.

You've got lots of options for rendering the text as True and False for these values...

If you just have two values, true and false, I'd be inclined to drop the v-for altogether and just write them separately.

<option :value="null">Pick a value</option>
<option :value="true">True</option>
<option :value="false">False</option>

Alternative ways of formatting the text would be to use a filter or method. So that's:

<option v-for="val in [true, false]" :value="val">{{ val | filter }}</option>

or

<option v-for="val in [true, false]" :value="val">{{ method(val) }}</option>

For a filter you'd define it in your component's filters section, for a method it'd be in your methods. Either way the function just needs to convert the boolean value to a string and then uppercase the first letter.

// Obviously you wouldn't call it 'method'...
method (value) {
    const str = String(value);
    return str.charAt(0).toUpperCase() + str.slice(1);
}

That said, given there are only two possible options, there are all sorts of other ways to do it. e.g.:

<option v-for="val in [true, false]" :value="val">{{ val ? 'True' : 'False' }}</option>

edited Jul 15, 2022 at 5:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 11, 2019 at 19:28

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edon Over a year ago

Thanks! My only issue here is that I need "True" and "False" to be a string when displaying it to the user, because I need a capital T and F respectively. Any suggestions? And yeah, I just gave a small example to see how it would work. If it's just true/false, it does not need v-for

JamesQuigley · Accepted Answer · 2019-06-11 19:34:41Z

0

One option would be to create a computed property that just returns this.selected === 'true'.

answered Jun 11, 2019 at 19:34

JamesQuigley

163 bronze badges

Collectives™ on Stack Overflow

VueJs bind boolean values to dropdown

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related