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

Question

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.
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?

Answer 1

So the image is a bit misleading. If you would like to get tag input with autosuggestions, then I would rather keep it separate.
It would be possible to enhance the example below with v-text-field, but feels kinda hacky to me.
Please let me know how does this solution suite you :)
new Vue({
el: '#app',
vuetify: new Vuetify({ icons: { iconfont: 'md' } }),
data: () => ({
options: [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'fizz' }],
value: [
{ id: 1, name: 'foo' },
{ id: 1, name: 'foo' }
],
}),
})
<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://fonts.googleapis.com/css?family=Material+Icons" 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>
<v-col cols="12" sm="12">
<v-chip class='mr-2' v-for='({id, name}, i) in value'>
{{ id }}: {{ name }}
<v-icon class='ml-2' small #click='value.splice(i, 1)'>close</v-icon>
</v-chip>
<v-menu>
<template v-slot:activator='{ on }'>
<v-btn icon v-on='on' class='green'>
<v-icon>add</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-for='o in options' #click='value.push(o)'>
<v-list-item-title>{{ o.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
<v-col>
<pre>{{ value }}</pre>
</v-col>
</v-row>
</v-container>
</v-app>
</div>

Answer 2

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>