Change options dynamically with vue js multi select

Question

Hi I'm using this modified wrapper to handle a multiple select for vue js. I'm trying to change value of this inside vue component. Here is my code.

<select2-multiple :options="car_options" v-model="input.classification">
       <option disabled value="0">Select one</option>
</select2-multiple>

And this is my vue script,

var vm = new Vue({
    el: '#el',
    delimiters: ["[[", "]]"],
    data: {
        input: {
            classification: []
        },
    },
    created: function () {
        var vm = this;
        vm.car_options = [
            {id: "Bubble car", text: 'Bubble car'},
            {id: "diesel", text: 'Diesel'},
            {id: "electric", text: 'Electric'},
            {id: "electric_diesel", text: 'Electric/Diesel'},
            {id: "electric_gasoline", text: 'Electric/Gasoline'},
            {id: "ethanol", text: 'Ethanol'},
            {id: "gasoline", text: 'Gasoline'},
            {id: "hydrogene", text: 'Hydrogene'},
            {id: "lpg", text: 'Liquified petroleum gas (LPG)'},
            {id: "other", text: 'Other'},
        ];
        vm.input.classification = ["Bubble car"];
    }
});

What I want's to do is when multi select appears Bubble car should be automatically selected. It would be great if someone can help. Multi select is working properly and values also are appearing. So I think the issue is in here,

vm.input.classification = ["Bubble car"];

No error message displayed.

MrMaavin · Accepted Answer · 2019-02-12 07:13:35Z

2

Seems to be working fine for me - JsFiddle

vm.input.classification = [vm.car_options[0].id]

edited Feb 12, 2019 at 7:13

MrMaavin

1,7572 gold badges22 silver badges33 bronze badges

answered Feb 12, 2019 at 7:11

varun agarwal

1,5098 silver badges10 bronze badges

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

Comments

Ömür Alçin · Accepted Answer · 2019-02-12 07:21:37Z

0

You need just adding the selected id in the data{} object like that:

selected: ["Bubble car"]

Here is your solution : JsFiddle

answered Feb 12, 2019 at 7:21

Ömür Alçin

8078 silver badges15 bronze badges

Collectives™ on Stack Overflow

Change options dynamically with vue js multi select

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related