Autocomplete/inputitems separate of "display" and "value"

[urkle]

Description

When using the autocomplete component with an array of objects the display and value are tied together to be the same. However this is not always desirable.

The inputitems component has a slightly different approach in that you can specify the "display" and get the object as the 'value", but even that is not always desirable.

For example (autocomplete scenario) I have a ID field I am editing on a record

const record = {
   attendeeId: null
}

I would like to be able to setup the autocomplete like this

<o-autocomplete :data="sourceOfData" v-model="record.attendeeId" field="name" field-value="id" open-on-focus/>

Such that when the modelValue is set the value is "looked up" in :data by ID to figure the correct "display" and when an initial/new value is selected in the control that the 'id' is set to the modelValue.

this would match the way that a select component normally works

{{ item.name }}

Similarly for inputitems to be able to behave the same way so I can use it as a replacement for as it provides a much nicer user experience.

Why Oruga need this feature

Allowing the components to be configured this way allows for easier integration/swapping out of the o-select component with o-autocomplete or o-inputitems and get the same 'data payload" for the modelValue

[urkle]

My workaround currently is this.

For o-autocomplete

<o-autocomplete
              :data="source"
              field="name"
              open-on-focus
              :model-value="entry(record)"
              @select="selectEntry(record, $event)" />

methods: {
   entry(record) {
      this.source.find(e => e.id === record.attendeeId).name
   },
   selectAttendee(record, attendee) {
      record.attendeeId = attendee.id;
    },
}

For o-inputitems

<o-inputitems
            :model-value="entry(record)"
            :data="source"
            autocomplete
            open-on-focus
            field="label"
            @update:model-value="selectEntry(record, $event)" />

methods: {
   entry(record) {
      return record.entries.map(e => this.source.find(g => g.id === e));
    },
    selectEntry(record, items) {
      record.entries = items.map(e => e.id);
    },
}

[jtommy]

Yes, at the moment your way is correct