Use `object[]` for options, but save as `string[]`

[mrleblanc101]

Hi,
I'm currently using an object[] for the options:

[
  {
    "id": "rural_community",
    "title": "Région rurale",
    "subtitle": "municipalité située à l'extérieur de la zone de navette des grands centres urbains comptant 10 000 habitants ou plus"
  },
  {
    "id": "remote_community",
    "title": "Région éloignée",
    "subtitle": "municipalité située à l'extérieur de la zone de navette des grands centres urbains comptant 10 000 habitants ou plus et qui n'a pas d'accès routier tout au long de l'année"
  },
  {
    "id": "northern_community",
    "title": "Région du Nord",
    "subtitle": "Yukon, Territoires du Nord-Ouest, Nunavut"
  }
]

because I use a Custom option template:

<template #option="props">
    <div class="option__desc">
        <div class="option__title">{{ props.option.name }}</div>
        <div>
            <small class="option__small">{{
                props.option.subtitle | capitalize
            }}</small>
        </div>
    </div>
</template>

So when I select a value, the v-model binding is the whole object:

[{
  "id": "rural_community",
  "title": "Région rurale",
  "subtitle": "municipalité située à l'extérieur de la zone de navette des grands centres urbains comptant 10 000 habitants ou plus"
}]

Is there a way to save only the id instead of the whole object ?
Like so:

['rural_community']

Because the API only accept a string[]

[lehoaibaokg]

I think the best way is to transform the data before submitting it to the API and after receiving the data from the API to populate the multiselect.
Because there may be cases where you need to get some additional data along with the ID, transforming the data by ourselves is the best way.

Let’s say we will have 2 common functions:

• convert: transform the data from the API to pass to the multiselect
• revert: transform the data from the multiselect to send to the API

Wrapping the multiselect into your custom component so you can achieve this case.

[mrleblanc101]

vueform/multiselect support this, so I guess I'll migrate to that https://jsfiddle.net/xajub20o/