如何将文本芯片附加到 vuetify 中的文本字段答案

【问题标题】：How to append text chips to text field in vuetify如何将文本芯片附加到 vuetify 中的文本字段
【发布时间】：2021-10-07 23:27:31
【问题描述】：

我使用 vuetify 创建了一个文本字段，我想在其中添加筹码。

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

我的问题是如何“合并”组合框和文本字段的两个功能？

【问题讨论】：

你想要的并不那么容易。 Vuetify repo 中有一个existing issue 用于非常相似的功能，标记为可能的未来增强功能。我相信如果使用当前版本的 Vuetify 可以很容易地做到这一点，作者会建议这样做。也许你可以在那里找到一些灵感......

标签： javascript vue.js vuetify.js

【解决方案1】：

没有任何代码有点难以帮助，但我认为这就是您要寻找的 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())
    }
  },
},


 }

【讨论】：