Vuetify How to select the same chip twice with v-auto-complete

Question

Vuetify How to select the same chip twice with v-auto-complete

464 Views Asked by Simao At 18 April 2025 at 14:10

I have a v-autocomplete and I want to have multiple chips, that's easy by adding the multiple prop. But I want to have multiple chips with the same name and value. I haven't been able to find a solution for that.

Here is my code:

<v-autocomplete
    filled
    chips
    multiple
    v-model="selectedRooms"
    :items="roomChoices"
    hide-no-data
    hide-selected
    label="Select Rooms"
    placeholder="Select from the available choices"
    prepend-icon="mdi-bed"
    clearable
    deletable-chips
>
</v-autocomplete>

data: () => ({
    property_name: null,
    dialog_active: false,
    roomChoices: ['bedroom', 'kitchen', 'bathroom', 'living-room'],
    values: [],
}),

Original Q&A

There are 1 best solutions below

**Neha Soni** · Accepted Answer

It is not possible to select the same value items in Vuetify's Autocomplete because if we can select the same value items twice then there is no way for Vuetify to detect which item has been selected and which item to remove when requested.

Now, This is where the requirement comes in that "Each item should have a unique identifier for Vuetify to know which item has been selected/removed."

However, if you want to select the same items with the same property twice (which makes less sense though), you can create that item twice in your data array but give each same item a unique identifier (let's say an id). Also, use the return-object prop to know which item among the same items has been selected.

Below is the demo where I created an array of objects data structure where some items have the same title but a unique id and I also used a return object prop to store the selected item's whole object instead of the title only.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <div class="mb-2">Selected items- {{ selectedRooms }}</div>
        <v-autocomplete
          filled
          chips
          multiple
          v-model="selectedRooms"
          :items="roomChoices"
          item-text="title"
          item-value="id"
          hide-no-data
          label="Select Rooms"
          deletable-chips
          clerable
          return-object
          ></v-autocomplete>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data () {
          return {
            property_name: null,
            selectedRooms: [],
            values: [],
            dialog_active: false,
            roomChoices: [
              { title: "bedroom", id: 1 },
              { title: "bedroom", id: 2 },
              { title: "kitchen", id: 3 },
              { title: "kitchen", id: 4 },
              { title: "bathroom", id: 5 },
              { title: "living-room", id: 6 }
            ],
          }
        }, 
      })
    </script>
  </body>
</html>

Vuetify How to select the same chip twice with v-auto-complete

There are 1 best solutions below

It is not possible to select the same value items in Vuetify's Autocomplete because if we can select the same value items twice then there is no way for Vuetify to detect which item has been selected and which item to remove when requested.

Related Questions in VUETIFY.JS

Related Questions in V-AUTOCOMPLETE

Trending Questions

Popular # Hahtags

Popular Questions