how to use v-chips inside of v-text-field

user_13553107 0
Viewed 2292

I have a pretty simple search text field using vuetify's v-text-field and i want to use show the input that the user has typed in a chip (possibly v-chip or v-combo-box) like this

enter image description here

i think v-text-field doesn't support chip as props based on the document. is there a way to do it? I tried using v-combo-box which is commented out in the code snippet i shared. V-combo-box works when i click on enter and i can take the value from v-model. However, whenever i click on the icon with v-combo-box it doesn't put a chip and also isn't able to get the search value from v-model. Here's my code

<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>
vuetify.js vue.js css
1 Answers

@curiosityrock, It is possible to show chip inside the text field

Please find the working code here:

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col
            cols="12"
            sm="6"
            md="3"
          >
            <v-text-field
              label="Regular"
              v-model="textBox"
            >
              <template v-slot:append> 
                <v-btn icon @click="addChips"><v-icon>mdi-magnify</v-icon></v-btn></template>
              <template v-slot:prepend-inner>
                <div v-for="(chipText , index) in chipData" :key="index">
                  <v-chip class="ma-1">{{chipText}}</v-chip></div>
              </template>
            </v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
      return {
        chipData: [],
        textBox: "",
      }
  },
  methods: {
    addChips() {
      if (this.textBox.length) {
        this.chipData.push(this.textBox)
        this.textBox = ""
      }
    }
  }
})

Please find the working codepen here: https://codepen.io/chansv/pen/wvggwWj?editors=101

user_105557850
Related