使用 vue js 多选动态更改选项答案

【问题标题】：Change options dynamically with vue js multi select使用 vue js 多选动态更改选项
【发布时间】：2019-07-05 18:12:48
【问题描述】：

您好，我正在使用 this 修改后的包装器来处理 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"];

没有显示错误信息。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您只需像这样在data{} 对象中添加选定的id：

selected: ["Bubble car"]

这是您的解决方案：JsFiddle

【讨论】：

【解决方案2】：

对我来说似乎工作正常 - JsFiddle

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

【讨论】：