CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
user16340184
user16340184

Reputation:

How to append text chips to text field in vuetify

I've created a text field using vuetify and I'd like to append chips there.

an example view

The chips will be added if the added text matches the pattern (e.g. start with '{' and end with '}'). I've implemented the part for Combobox when added text matches given pattern new chip is added but in that case, it's not possible to add text and it's not possible to add chips to text-field either.

My question is how to 'merge' two functionalities of Combobox and text-field?

Upvotes: 1

Views: 1763

Answers (1)

Edouard Yonga
Edouard Yonga

Reputation: 517

without any piece of code is a bit difficult to help but this is what i think your looking for Combobox add data with chips

<v-combobox
  v-model="model"
  :items="items"
  :search-input.sync="search"
  hide-selected
  hint="Maximum of 5 tags"
  label="Add some tags"
  multiple
  persistent-hint
  small-chips
>
  <template v-slot:no-data>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title>
          No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </template>
</v-combobox>

export default {
    data: () => ({
      items: ['Gaming', 'Programming', 'Vue', 'Vuetify'],
      model: ['Vuetify'],
      search: null,
    }),

watch: {
  model (val) {
    if (val.length > 5) {
      this.$nextTick(() => this.model.pop())
    }
  },
},


 }

Upvotes: 3

Related Questions