Vue-Multiselect - 取消选择一组预加载值不起作用

Question

我的代码：

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

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

Answer 1

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

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

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

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