Как предварительно выбрать опцию vue-multiselect, когда options - это массив объектов?

track-by Использование

Документы указывают, что track-by «Используется для сравнения объектов. Используйте только если опции являются объектами. »

То есть он определяет ключ объекта, который будет использоваться при сравнении значений объекта в options. Документы должны фактически указывать, что track-by требуется , когда опции являются объектами , потому что <vue-multiselect> использует track-by , чтобы определить, какие опции в выпадающем списке выбраны и для правильно удалить выбранную опцию из мультиселекции .

Без track-by вы бы увидели два ошибочных поведения для опций объекта: (1) пользователь мог бы повторно выбрать уже выбранные опции, и (2) попытка удалить выбранные опции вместо этого вызвала бы все опции быть вставленным заново.

Установка начальных значений

<vue-multiselect> не поддерживает автоматический перевод массива значений, но вы можете легко сделать это из родительского компонента.

1. Создать локальное свойство данных, чтобы указать track-by и начальные значения множественного выбора (например, с именами trackBy и initialValues соответственно):

   export default {
     data() {
       return {
         //...
         trackBy: 'id',
         initialValues: [2, 5],
       }
     }
   }
   

2. Свяжите <vue-multiselect>.track-by с this.trackBy и <vue-multiselect>.v-model с this.value:

   <vue-multiselect :track-by="trackBy" v-model="value">
   

3. Создайте наблюдателя на this.initialValues, который отображает эти значения в массив объектов основаны на this.trackBy, устанавливая this.value в результат:

   export default {
     watch: {
       initialValues: {
         immediate: true,
         handler(values) {
           this.value = this.options.filter(x => values.includes(x[this.trackBy]));
         }
       }
     }
   }
   

Vue.component('v-multiselect', window.VueMultiselect.default);

new Vue({
  el: '#app',
  data () {
    return {
      trackBy: 'id',
      initialValues: [5,2],
      value: null,
      options: [
        { id: 1, name: 'Vue.js', language: 'JavaScript' },
        { id: 2, name: 'Rails', language: 'Ruby' },
        { id: 3, name: 'Sinatra', language: 'Ruby' },
        { id: 4, name: 'Laravel', language: 'PHP' },
        { id: 5, name: 'Phoenix', language: 'Elixir' }
      ]
    }
  },
  watch: {
    initialValues: {
      immediate: true,
      handler(values) {
        this.value = this.options.filter(x => values.includes(x[this.trackBy]));
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.6.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">
  <v-multiselect :track-by="trackBy"
                 :options="options"
                 v-model="value"
                 label="name"
                 multiple>
  </v-multiselect>
  <pre>{{ value }}</pre>
</div>