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钩子，在其中预选“ Other”组：

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

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

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

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

1 个答案: