app_vue2/components/Ui/Input/Autocomplete.vue

<template>
  <main>
    <v-autocomplete
      @change="$emit('update', $event, field)"
      :items="itemsToDisplayed"
      :label="$t(label)"
      item-text="textDisplay"
      :item-value="itemValue"
      :multiple="multiple"
      :loading="isLoading"
      :return-object="returnObject"
    >
    </v-autocomplete>
  </main>
</template>

<script lang="ts">
  import {computed, defineComponent, ComputedRef} from '@nuxtjs/composition-api'
  import {AnyJson} from "~/types/interfaces";

  export default defineComponent({
    props: {
      label: {
        type: String,
        required: false
      },
      field: {
        type: String,
        required: false
      },
      data: {
        type: String,
        required: false
      },
      items: {
        type: Array,
        required: false,
        default: []
      },
      readOnly: {
        type: Boolean,
        required: false
      },
      itemValue: {
        type: String,
        default: 'id'
      },
      itemText: {
        type: Array,
        required: true
      },
      returnObject: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      isLoading: {
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      //On reconstruit les items à afficher car le text de l'Item doit être construit par rapport au itemText passé en props
      const itemsToDisplayed: ComputedRef<Array<AnyJson>> = computed(() => {
        return props.items.map((item: any) => {
          const textDisplay: Array<string> = []
          for (const text of props.itemText) {
            textDisplay.push(item[text as string])
          }
          return Object.assign({}, item, {textDisplay: textDisplay.join(' ')})
        })
      })

      return {
        label_field: props.label ?? props.field,
        itemsToDisplayed
      }

    }
  })
</script>

<style scoped>

</style>