如何将文本芯片附加到 vuetify 中的文本字段 [英] How to append text chips to text field in vuetify

问题描述

我已经使用 vuetify 创建了一个文本字段，我想在那里附加芯片.

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

如果添加的文本与模式匹配(例如以{"开头并以}"结尾)，则将添加筹码.当添加文本匹配给定模式新芯片时，我已经实现了组合框的部分，但在这种情况下，无法添加文本，也不可能将芯片添加到文本字段.

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?

推荐答案

没有任何代码有点难以帮助，但这正是我认为您要寻找的Combobox 用筹码添加数据

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())
    }
  },
},


 }

这篇关于如何将文本芯片附加到 vuetify 中的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！