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

Question

Я хочу предварительно выбрать определенное значение в раскрывающемся списке выбора, сгенерированном с помощью vue-multiselect.
Я могу заставить это работать нормально, если у меня есть простой массив строк, подобный следующему:

['Test 1', 'Test 2', 'Test 3']

Однако, когда я использую массив объектов, я не могу заставить это работать.Например, если у меня есть следующее:

<v-multiselect :options="[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]"
               label="name"
               track-by="id"
               v-model="test">
</v-multiselect>

Независимо от того, что я установил свойство данных test, к которому подключена v-модель, оно не будет предварительно выбирать значение.Я пробовал 1, 2, 3, '1', '2' и '3' для test, когда track-by равно id и 'Test 1' и т. Д., Когда track-byname, но, похоже, ничего не работает.

Что я здесь не так делаю?Я посмотрел на документы по https://vue -multiselect.js.org / # sub-single-select-object , но, похоже, они не дают пример, когда вы хотите предварительно установить значение длямассив объектов для опций.Google также не вернул то, что я искал.

По связанной теме, как только я получу эту работу, что мне нужно изменить, чтобы выбрать несколько значений, когда я устанавливаю компонент на multiple?Спасибо.

Answer 1

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. Создать watcher on this.initialValues, который отображает эти значения в объектмассив ct на основе 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]));
      }
    }
  }
})

  
  
  {{ value }}

Answer 2

Похоже, ошибка.Обходной путь должен использовать фактическую ссылку на object

Vue.component('v-multiselect', window.VueMultiselect.default);
let testOptions=[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]
new Vue({
  el: '#app',
  data: function () {
    return {
      test: testOptions[1], // <- use an object ref here!
      testOptions
    };
  }
});