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

Я хочу предварительно выбрать конкретное значение в раскрывающемся списке выбора, созданного 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 Свойство data, с которым связана v-модель, не будет предварительно выбирать значение. я пробовал 1, 2, 3, '1', '2' а также '3' за test когда track-by является id а также 'Test 1'и т. д., когда track-by является name но ничего не работает.

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

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

Источник

4 ответа

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>

Источник

Похоже на ошибку. Обходной путь должен использовать фактическую ссылку на 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
    };
  }
});
Источник

Самый простой способ, который я обнаружил, - это отправить весь объект из BE, чтобы он был предварительно выбран. Если вы отправите тот же объект из BE, он будет предварительно выбран. Но я не знаю, жестко ли запрограммированы ваши варианты на FE или они взяты из базы данных или чего-то еще. У меня была такая же проблема, но мои значения исходили из моей базы данных, поэтому было легко воспроизвести объект

Источник

В вашем вопросе просто отсутствует :object="true" на самом деле они не знали, что это тип строки или объекта, когда мы передаем это, он знает, что да, это объект, и мне нужно label="name" из v-model=" test", выбирает его и показывает как предварительно выбранный

Источник
Другие вопросы по тегам