I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a workaround for this problem? I attempted to use v-combo-box, but it only works when Enter is pressed, and I cannot retrieve the search value from v-model when clicking on the icon within v-combo-box.
https://i.sstatic.net/VMCje.png
<template>
<div>
<!-- <v-combobox v-model="search" chips clearable @keyup.enter="onEnter">
<v-icon small @click.stop="submit"> fas fa-search </v-icon>
</v-combobox> -->
<v-text-field chip v-model="search" label="Search" hint="Company and Campaign Name" clearable autofocus append="hey" @keyup.enter="onEnter">
<v-icon slot="append" small @click="submit"> fas fa-search </v-icon>
</v-text-field>
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
name: 'MultiSearch',
data() {
return {
search: '',
}
},
methods: {
submit(event) {
event.preventDefault()
console.log('this search', this.search, event)
this.$emit('updateSearch', this.search)
},
onEnter(event) {
console.log('this search', this.search)
this.$emit('updateSearch', this.search)
},
},
})
</script>
<style lang="stylus" scoped>
.v-text-field >>> .v-label
color:black !important
caret-color: black !important
.v-text-field >>> .v-input__control
color:black !important
caret-color:black !important
@media only screen and (min-width:320px) and (max-width:480px){
.v-text-field{
width:200px;
}
}
.v-text-field{
}
</style>