Vue.js Select All Options

Question

I tried to use Vue.js to make a Select with a list of options and one option called 'Any' which will select all options.

I want to use HTML select Tag, not a checkbox.

I am trying to do something like this but I am not sure it is the right way to do it.

<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
    </select>

    <span>Selected: {{ selected }}</span>
</div>

let app = new Vue({
    el: '#app',
    data: {
        selected: ['A', 'B', 'C'],
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' },
            { text: 'Any', value: ['A', 'B', 'C'] },
       ]
    }
});

It's hard to help without any code. What's wrong with a `select` with `multiple` on? When the "any" value is selected, set the "selected" value on all items. Similar to [this](https://stackoverflow.com/questions/9924666) but Vue instead of JQ. — David Weldon, Jun 01 '19 at 22:51

score 0 · Answer 1 · answered Jun 02 '19 at 07:08

You data property must be a function not an object. try this:

data(){
    return {
        selected: ['A', 'B', 'C'],
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' },
            { text: 'Any', value: ['A', 'B', 'C'] },
       ]
    }
  }

Also see the docs that you must have the data as a function in almost all cases.

Vue.js Select All Options

1 Answers1