使用Vue JS Multi Select動態更改選項

Question

嗨，我正在使用這個修改過的包裝器來處理vue js的多項選擇。 我正在嘗試更改vue內部組件的值。 這是我的代碼。

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

這是我的Vue腳本，

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"];
    }
});

我想要做的是當多選出現時， 應該自動選擇泡泡車 。 如果有人可以幫助，那就太好了。 多選功能正常運行，並且值也出現。 所以我認為問題出在這里 ，

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

沒有顯示錯誤消息。

Answer 1

似乎對我來說很好-JsFiddle

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

Answer 2

您只需要在data{}對象中添加選定的ID ，如下所示：

selected: ["Bubble car"]

這是您的解決方案： JsFiddle