如何在Vue中预先选择多个选择js

Question

这是我的veu多选标记

这是代码

<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>

Answer 1

只需使用您希望预先选择的数据填充baths数据属性。

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

另外，您需要将multiple属性设置为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>

---

请参见以下示例JS Fiddle：

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