如何在 v-text-field 中使用 v-chips

Question

我有一个使用 vuetify 的 v-text-field 的非常简单的搜索文本字段，我想使用显示用户在这样的芯片（可能是 v-chip 或 v-combo-box）中输入的输入

我认为 v-text-field 不支持基于文档的芯片作为道具。有办法吗？我尝试使用在我共享的代码 sn-p 中注释掉的 v-combo-box。当我点击输入时，V-combo-box 起作用，我可以从 v-model 中获取值。但是，每当我单击带有 v-combo-box 的图标时，它都不会放置芯片，也无法从 v-model 获取搜索值。这是我的代码

<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>

Answer 1

@curiosityrock，可以在文本框内显示芯片

请在此处找到工作代码：

<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 = ""
      }
    }
  }
})

请在此处找到有效的 codepen：https://codepen.io/chansv/pen/wvggwWj?editors=101