Question

嗨，我正在使用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"];

未显示错误消息。

Answer 1

似乎对我来说很好-JsFiddle

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

Answer 2

您只需要在data{}对象中添加所选ID ，如下所示：

selected: ["Bubble car"]

这是您的解决方案：JsFiddle

使用Vue JS Multi Select动态更改选项

2 个答案: