0

我的代码：

https://jsfiddle.net/bgarrison25/tndsmkq1/4/

html:

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

零件：

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

所以我创建了一个使用组的多选。如果它是一个没有预先选择的选项的新负载，它工作正常。但是，如果您预先选择了值并尝试取消选择它们所在的组，则根本不起作用。此外，如果我手动取消选择一个然后再次选择该组，这似乎是一个问题。

在小提琴中重现的步骤：

1) Laravel 和 Phoenix 已经在加载时被选中

2）单击多选并选择“其他”以取消选择该组。什么都没发生。

3) 取消选择“Phoenix”选项，然后单击“Other”组。现在您可以选择“Laravel”/“Phoenix”/“Laravel”。

想知道我做错了什么还是这是一个错误。如果它是一个错误，我将简单地发布他们的问题。

4

1 回答 1

2

您的组取消选择不起作用，因为您在 中预定义this.value的对象不引用this.options. 它们具有相同的结构和值，但它们是不同的对象。要使您的组取消选择与预选值一起使用，请将您的value数据属性设置[]为默认值，然后添加一个mounted挂钩，您可以在其中预选“其他”组：

  mounted() {
    this.value = this.options.find(option => option.language === 'Other').libs;
  }

这样，使用预选值取消选择“其他”即可。

至于您可以选择重复项的其他问题，我从未使用过 Vue Multiselect，但文档描述了类似的事件，@select或者@input您可以在需要时使用它们来过滤重复项。但是，根据文档，trackByprop 用于比较对象，奇怪的是它本身不起作用。

于 2019-04-26T16:35:49.537 回答