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) Отмените выбор опции "Феникс", а затем щелкните группу "Другие". Теперь у вас есть "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 используется для сравнения объектов, и странно, что он не работает сам по себе.