CODEWITHSUNDEEP
vuetify.jsv-autocomplete
Simao
Simao

Reputation: 581

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

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: [],
}),

Upvotes: 0

Views: 688

Answers (1)

Neha Soni
Neha Soni

Reputation: 4674

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>

Upvotes: 1

Related Questions