Answer a question

I am using the vuetify framework and I am running into this issue where I am not sure how I can add an item from the list multiple times. I have a dropdown list and I would like to add the option foo or any option multiple times on select. Here is a link to the demo codepen.

So right now if I select foo or any other option and then select it again from the dropdown list, it goes away, instead I want another chip with same option added into it?

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          text: 'Foo',
          value: 'foo'
        },
        {
          text: 'Bar',
          value: 'bar'
        },
        {
          text: 'biz',
          value: 'buzz'
        },
        {
          text: 'buzz',
          value: 'buzz'
        }
      ],
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-combobox :items="items" label="Add Multiple Chips" multiple small-chips solo deletable-chips>
        <template v-slot:item="{ index, item }">
      <v-list-tile-content>
        {{item.text}}
      </v-list-tile-content>
    </template>
        <template v-slot:selection="{ index, item }">
      <v-chip close dark color="info">
        {{ item.text }}
      </v-chip> 
    </template>
      </v-combobox>
    </v-container>
  </v-app>
</div>

If anyone has any clue on how to achieve this. It will be much appreciated. Thank you

Answers

A couple of small adjustments,

• put a .stop on the item click to prevent Vuetify from processing after your handler

• tell the combo-box to use arr for :value

• add a delete click handler to v-chip and corresponding method (NB this works on Vuetify 2.1.0, but not on Vuetify 1.5.14 as used on the Codepen. If you don't need that specific version, install the latest.

Codepen Vuetify v1.5.14

CodeSandbox Vuetify v2.1.0

<template>
  <div id="app">
    <v-app id="inspire">
      <v-container>
        <v-combobox
          :items="items"
          label="Add Multiple Chips"
          multiple
          small-chips
          solo
          deletable-chips
          :value="arr"
        >
          <template v-slot:item="{ index, item }">
            <v-list-tile-content @click.stop="multipleSelection(item)">{{item.text}}</v-list-tile-content>
          </template>
          <template v-slot:selection="{ index, item }">
            <v-chip close dark color="info" 
               @click:close="deleteChip(item)" >{{ item.text }}</v-chip>
          </template>
        </v-combobox>
      </v-container>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "playground",
  data: () => ({
    arr: [],
    items: [
      {
        text: "Foo",
        value: "foo"
      },
      {
        text: "Bar",
        value: "bar"
      },
      {
        text: "biz",
        value: "buzz"
      },
      {
        text: "buzz",
        value: "buzz"
      }
    ]
  }),
  methods: {
    multipleSelection(item) {
      this.arr.push({...item});
      console.log(this.arr);
    },
    deleteChip(item) {
      this.arr = this.arr.filter(x => x !== item);
      console.log(this.arr);
    }
  }
};
</script>