單選vue js多選子組

Question

我正在使用 vue js 多選庫作為多選庫。 我正在使用子組功能。 . 我希望該功能只允許從一組中選擇一個選項。 例如，如果我從 javascript 組中選擇 vue js，則不允許我為給定的 JS fiddle 選擇 adonis，否則如果我選擇 vue js 然后選擇 adonis，則應取消選擇 vue js。 任何幫助都感激不盡。 提前致謝

示例 JS 小提琴https://jsfiddle.net/bgarrison25/tndsmkq1/4/

 new Vue({ components: { Multiselect: window.VueMultiselect.default }, data () { return { options: [ { language: 'Javascript', libs: [ { name: 'Vue.js', category: 'Front-end' }, { name: 'Adonis', category: 'Backend' } ] }, { language: 'Ruby', libs: [ { name: 'Rails', category: 'Backend' }, { name: 'Sinatra', category: 'Backend' } ] }, { language: 'Other', libs: [ { name: 'Laravel', category: 'Backend' }, { name: 'Phoenix', category: 'Backend' } ] } ], value: [ { name: 'Laravel', category: 'Backend' }, { name: 'Phoenix', category: 'Backend' } ] } } }).$mount('#app')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link href="https://unpkg.com/vue-multiselect@2.1.4/dist/vue-multiselect.min.css" rel="stylesheet"/> <script src="https://unpkg.com/vue-multiselect@2.1.4/dist/vue-multiselect.min.js"></script> <div id="app"> <label class="typo__label">Groups</label> <multiselect v-model="value" :options="options" :multiple="true" group-values="libs" group-label="language" :group-select="true" placeholder="Type to search" track-by="name" label="name"> <span slot="noResult">Oops! No elements found. Consider changing the search query.</span> </multiselect> <pre class="language-json"><code>{{ value }}</code></pre> </div>

Answer 1

你可以在下面嘗試這樣的事情，它的功能有點過於復雜，但可以在它自己的組件中很好地工作。

基本上在輸入事件上，您可以搜索以查看該組中是否還有其他事件，然后相應地進行選擇。

 new Vue({ components: { Multiselect: window.VueMultiselect.default }, methods: { selectUnique(ev) { if (!ev || ev.length < this.value.length) { this.value = ev; return; } let newValue = ev.filter(x => this.value.indexOf(x) === -1)[0]; let group = this.getGroupByLib(newValue); if (this.value.some(x => this.getGroupByLib(x) === group)) { this.value = this.value.filter(x => this.getGroupByLib(x) !== group); this.value.push(newValue); } else this.value = ev; }, getGroupByLib(lib) { return this.options.filter(x => x.libs.some(y => y.name === lib.name))[0].language; } }, data() { return { options: [{ language: 'Javascript', libs: [{ name: 'Vue.js', category: 'Front-end' }, { name: 'Adonis', category: 'Backend' } ] }, { language: 'Ruby', libs: [{ name: 'Rails', category: 'Backend' }, { name: 'Sinatra', category: 'Backend' } ] }, { language: 'Other', libs: [{ name: 'Laravel', category: 'Backend' }, { name: 'Phoenix', category: 'Backend' } ] } ], value: [] } } }).$mount('#app')

 * { font-family: 'Lato', 'Avenir', sans-serif; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></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="app"> <label class="typo__label">Groups</label> <multiselect :value="value" :options="options" :multiple="true" group-values="libs" group-label="language" placeholder="Type to search" track-by="name" label="name" @input="selectUnique"> <span slot="noResult">Oops! No elements found. Consider changing the search query.</span> </multiselect> <pre class="language-json"><code>{{ value }}</code></pre> </div>

Answer 2

把這兩件事變成假的

 :multiple="false" :group-select="false"

檢查這里代碼