Как во Vue-multiselect сделать так, чтобы в data записывалось только одно поле из объекта?

Question

[Сергей Семенов]

На вход приходит объект - для отображения названия опции берем поле name из этого объекта, а для отправки на сервер нужно поле id. Не могу найти в доках инструкции к такому случаю. Может кто сталкивался? Спасибо.

Comments

[Aetae]

Vue-multiselect, похоже, не умеет этого из коробки. В чём проблема вручную забрать id из value-объекта?

[Ярослав Иванов]

Плагины никогда не будут на 100% отвечать по потребностям.

[Сергей Семенов]

Aetae, в смысле при событии выбора? тогда нам нужно делать левый v-model и записывать туда весь объект при выборе, а в данные для отправки тдельно пушить только айди. Пока что так и сделано...но это такое

[Aetae]

Что поделать. Например в quasar q-select есть свойство emit-value, которое делает именно это. Но тут чего нет - того нет.
Можешь сделать например так:

<vue-multiselect v-model="multiselectValue" :options="multiselectOptions"/>

computed: {
  multiselectValue: {
    get() {
      this.multiselectOptions.find(({id}) => id === this.data.id)
    }.
    set({id}) {
      this.data.id = id;
    }
  }
}

[madismad]

Думаю самый лёгкий способ решить эту проблему - написать обёртку-компонент для vue-multiselect и там провести все нужные вам манипуляции, например как в ответе выше

[Сергей Семенов]

Aetae, все круто, только теперь ещё трабл - у нас может быть неограниченное количество этих селектов с одинаковыми даннми и при использовании одной можели при выборе в одном селекте выбирается таже опция и в других...с этим вот тоже не пойму как быть, как то в цикле чтоли создавать модели?

[Aetae]

Сергей Семенов, если компонент планируется переиспользовать, то как и сказал madismad - надо сделать компонент обёртку, чтобы не плодить копипасту.

[Сергей Семенов]

Aetae, спасибо, не додумался - помогло