How to preselect in Vue multiple select js

Question

This is the markup for my veu multiselect

and here is the code

<multiselect
   v-model="baths"
   placeholder="Bath"
   track-by="label"    
   label="label"
   :allow-empty="true"
   :options="options.baths"
   :select-label="''"
   :selected-label="''"
   :deselect-label="'Remove'"></multiselect>

I'd suggest providing a lot more details about your problem, especially the code behind the multiselect component. — matpb
– matpb, Commented Aug 15, 2018 at 7:06

Julian Paolo Dayag · Accepted Answer · 2018-08-15 07:35:38Z

2

Just populate the baths data property with the data you wanted to be preselected.

data: {
    baths: [],
    options: {
        baths: [
            // baths list here
        ]
    }
},
mounted() {
    this.baths.push(this.options.baths[1]);
}

Also you need to set the multiple prop to true:

<multiselect
   v-model="baths"
   placeholder="Bath"
   track-by="label"    
   label="label"
   :allow-empty="true"
   :options="options.baths"
   :select-label="''"
   :selected-label="''"
   :deselect-label="'Remove'"
   :multiple="true">
</multiselect>

See this example JS Fiddle:

https://jsfiddle.net/0hLexkyz/278/

answered Aug 15, 2018 at 7:35

Julian Paolo Dayag

3,7473 gold badges24 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

How to preselect in Vue multiple select js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related