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

所以我创建了一个 multiselect 使用组。如果它是没有预先 selected 选项的新负载，它可以正常工作。但是，如果您有预selected 的值并尝试删除select 他们所在的组，那根本行不通。此外，如果我手动删除 select 一个然后再次 select 组，这似乎是一个问题。

在 fiddle 中重现的步骤：

1) Laravel 和 Phoenix 已 select 载入

2) 单击 multiselect 并选择 "Other" 取消 select 组。没有任何反应。

3) De-select "Phoenix"选项然后点击"Other"组。现在您有 "Laravel" / "Phoenix" / "Laravel" 作为选项。

想知道我是否做错了什么或者这是一个错误。如果它是一个错误，我将简单地 post 在他们的问题中。

Answer 1

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

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

有了这个，用预选值取消选择 "Other" 就可以了。

至于你的另一个可以选择重复项的问题，我从来没有使用过 Vue Multiselect，但是文档描述了像 @select 或 @input 这样的事件，你可以使用它来过滤掉重复项需要。但是，根据文档，trackBy prop 用于比较对象，奇怪的是它本身不起作用。

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

Vue-Multiselect - Deselecting group of pre-loaded values doesn't work

javascript

vue.js