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

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

在 fiddle 中重现的步骤:

1) Laravel 和 Phoenix 已在加载时选择

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

3) 取消选择“Phoenix”选项，然后单击“其他”组。现在你有“Laravel”/“Phoenix”/“Laravel”作为选项。

想知道我是否做错了什么或者这是否是一个错误。如果它是一个错误，我只会在他们的问题中发布。

Answer 1

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

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

这样，就可以取消选择具有预选值的“其他”。

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