单选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"

检查这里代码