How to add same item multiple times with Vuetify v-select

Vuetify provides a select field component that is used for collecting user provided information from a list of options. Here for the documentation

The component works with check boxes, so each time you check an item, it is added at the end of the list.

enter image description here enter image description here

Now what I'd like to do is adding the same item on the list multiple times, so each time you click the item it is added at the end of the list. Is this achievable with Vuetify?

1 answer

  • answered 2019-10-21 20:31 Ja9ad335h

    If you have items with same name, you need to use it's distinct property (here it is "id") to tell the difference.

    and use item-text & item-value as shown in the example.

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        items: [
          { id: 1, name: 'foo' }, 
          { id: 2, name: 'bar' }, 
          { id: 3, name: 'foo' }, 
          { id: 4, name: 'fizz' }, 
          { id: 5, name:  'bar' }],
        value: null,
      }),
    })
    <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <div id="app">
      <v-app id="inspire">
        <v-container fluid>
          <v-row align="center">
            <v-col cols="12" sm="6">
              <v-select v-model="value" :items="items" item-text="name" item-value="id" attach chips label="Chips" multiple></v-select>
            </v-col>
            <v-col>
              <pre>{{ value }}</pre>
            </v-col>
          </v-row>
        </v-container>
      </v-app>
    </div>