0👍
✅
Here is the working demo.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return {
selectedItems: [],
items: [ { "id": 1, "start_time": "10:00", "end_time": "11:30", "active": true },{ "id": 2, "start_time": "11:30", "end_time": "01:00", "active": true }]
}
},
})
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="selectedItems"
:items="items"
filled
chips
color="blue-grey lighten-2"
label="Select"
item-text="start_time"
item-value="id"
multiple
>
<template v-slot:selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
>
{{ data.item.start_time }} ~ {{data.item.end_time}}
</v-chip>
</template>
<template v-slot:item="data">
<v-list-item-content>
<v-list-item-title>{{ data.item.start_time }} ~ {{data.item.end_time}}</v-list-item-title>
</v-list-item-content>
</template>
</v-autocomplete>
</v-app>
</div>
Source:stackexchange.com