我有一个选项数组,它显示在多选选项中。但我需要选择一个提供 id 的默认选项。在我的代码中,我需要选择 id = 2 的默认选项。如何在 vue.js 中使用多选来做到这一点?
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="vue-app2">
<div>
<label class="typo__label">Single select / dropdown</label>
<multiselect v-model="value" deselect-label="Can't remove this value" track-by="id" label="name"
placeholder="Select one" :options="options" :searchable="false" :allow-empty="false">
<template slot="singleLabel" slot-scope="{ option }"><strong>{{ option.name }}</strong> is written
in<strong> {{ option.language }}</strong></template>
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
</div>
<script >
Vue.component('multiselect', window.VueMultiselect.default);
new Vue({
el: '#vue-app2',
data: {
id:2,
value:null,
options: [
{ id:1, name: 'Vue.js', language: 'JavaScript' },
{ id:2, name: 'Rails', language: 'Ruby' },
{ id:3,name: 'Sinatra', language: 'Ruby' },
{ id:4,name: 'Laravel', language: 'PHP', $isDisabled: true },
{ id:5,name: 'Phoenix', language: 'Elixir' }
]
}
});
</script>
最佳答案
如果您需要从 中获取默认值 id数据然后在 上找到并设置默认值已安装 ;
new Vue({
el: '#vue-app2',
data: {
id: 2,
value: null,
options: [
{ id: 1, name: 'Vue.js', language: 'JavaScript' },
{ id: 2, name: 'Rails', language: 'Ruby' },
{ id: 3, name: 'Sinatra', language: 'Ruby' },
{ id: 4, name: 'Laravel', language: 'PHP', $isDisabled: true },
{ id: 5, name: 'Phoenix', language: 'Elixir' }
]
},
mounted() {
this.value = this.options.find(option => option.id === this.id);
}
});
关于vue.js - 如果我只有一个选项属性,如何在 vue-multiselect 中设置默认值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58405758/