Vue-Multiselect - отмена выбора группы предварительно загруженных значений не работает - PullRequest
Новая
       36

Vue-Multiselect - отмена выбора группы предварительно загруженных значений не работает

0 голосов
/ 26 апреля 2019

Мой код:

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  }}

Компонент: 

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" в качестве опций.

Хотите знать, если я делаю что-то не так или это ошибка?Если это ошибка, я просто опубликую в своих выпусках.

1 Ответ

2 голосов
/ 26 апреля 2019

Отмена выбора вашей группы не работает, потому что объекты, которые вы предварительно определили в this.value, не ссылаются на объекты в this.options.Они имеют одинаковую структуру и значения, но это разные объекты.Чтобы отменить выбор группы для работы с предварительно выбранными значениями, задайте для свойства данных value значение по умолчанию [], затем добавьте хук mounted, в котором вы предварительно выбираете группу «Другое»: 

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

При этом отмена выбора «Другое» с предварительно выбранными значениями работает.

Что касается вашей другой проблемы, где могут быть выбраны дубликаты, я никогда не использовал Vue Multiselect, но в документации описываются такие события, как @select или @input, которыевы, вероятно, можете использовать для фильтрации дубликатов, когда это необходимо.Однако, согласно документам, trackBy prop используется для сравнения объектов, и странно, что он не работает сам по себе.

...