How to show multiple attributes while selecting items in v-autocomplete?-CodePudding

How do I achieve v-autocomplete to show both the value and text when selecting?

Here is my code-

<v-autocomplete
    v-model="request"
    v-if="products.data"
    :items="products.data"
     outline
    chips
    label="Select item"
    item-text="name"
    item-value="id"
     >

products: [
   {
      text: "Apple",
      value: 209
   },
   {
      text: "Banana",
      value: 229
   }
]

Currently, I am able to display only the text but I want two display both (text and value in the options) before selecting.

CodePudding user response：

Using slots you can do this-

<v-autocomplete
   :items="products"
   label="Select"
   item-text="text"
   item-value="value"
 >
  <!-- If you want to modify the selected data -->
   <template v-slot:selection="data">
     {{ data.item.text }} {{ data.item.value }}
   </template>

   <!-- If you want to modify the list options -->
   <template v-slot:item="data">
     {{ data.item.text }} {{ data.item.value }}
   </template>
</v-autocomplete>

CodePudding user response：

To modify the dropdown item (the option), use item slot:

<template #item="{ item: { text, value } }">
  <span v-text="text   ' - '   value" />
</template>

To modify the way the item looks when selected (inside the input area), use selection slot:

<template #selection="{ item: { text, value } }">
  <v-chip> {{ text }} - {{ value }} </v-chip>
</template>

Both of the above slots are random examples. Feel free to replace their markup (HTML) to suit your project.

Example with single select.
Example with multiple select.