DemoComboboxNoDataWithChips.vue
793 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script setup>
const items = [
'Gaming',
'Programming',
'Vue',
'Vuetify',
]
const selectedList = ref(['Vuetify'])
const search = ref(null)
watch(selectedList, value => {
if (value.length > 5)
nextTick(() => selectedList.value.pop())
})
</script>
<template>
<VCombobox
v-model="selectedList"
v-model:search-input="search"
:items="items"
hide-selected
:hide-no-data="false"
placeholder="deployment"
hint="Maximum of 5 tags"
label="Add some tags"
multiple
persistent-hint
>
<template #no-data>
<VListItem>
<VListItemTitle>
No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
</VListItemTitle>
</VListItem>
</template>
</VCombobox>
</template>