如何在Vuetify的v-text-field中集成v-chip展示输入内容？及v-combobox使用异常排查

你说得对，v-text-field确实没有内置的chip属性支持，所以用v-combobox是更合适的选择——它原生支持chip展示，我们只需要调整一下代码逻辑就能解决你遇到的问题。

问题分析 #

你之前的v-combobox代码有两个核心问题：

1. v-model绑定的是字符串，而开启multiple和chips后，v-combobox需要绑定数组来存储多个chip值
2. 点击搜索图标时，没有手动将当前输入的内容添加到chip列表中

修正后的完整代码 #

<template>
  <div>
    <v-combobox
      ref="combobox"
      v-model="search"
      chips
      multiple
      clearable
      hide-selected
      label="Search"
      hint="Company and Campaign Name"
      autofocus
      @keyup.enter="addSearchChip"
    >
      <template v-slot:append>
        <v-icon small @click.stop="addSearchChip">
          fas fa-search
        </v-icon>
      </template>
    </v-combobox>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  name: 'MultiSearch',
  data() {
    return {
      // 改为数组存储多个chip值
      search: [],
    }
  },
  methods: {
    addSearchChip() {
      // 获取当前输入框的文本（未提交的内容）
      const inputValue = this.$refs.combobox?.internalValue || ''
      if (inputValue.trim() && !this.search.includes(inputValue.trim())) {
        // 添加到chip列表
        this.search.push(inputValue.trim())
        // 清空输入框
        this.$refs.combobox.internalValue = ''
        // 触发父组件的更新事件
        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;
  }
}
</style>

关键修改说明 #

• v-model改为数组：search从字符串''变成数组[]，因为multiple模式下v-combobox需要用数组来管理多个选中的chip值
• 添加multiple属性：开启多选项模式，允许添加多个chip
• hide-selected属性：隐藏已经添加为chip的选项，避免下拉列表重复显示
• 统一处理添加逻辑：将回车和点击图标的事件合并为addSearchChip方法，先获取输入框的未提交内容，验证非空且未存在后添加到数组，再清空输入框并触发父组件事件
• 使用ref获取输入值：通过$refs.combobox.internalValue可以拿到用户当前输入但未提交到v-model的文本

如果你坚持要用v-text-field的替代方案 #

如果不想用v-combobox，可以手动维护一个chip数组，在输入框下方展示v-chip列表：

<template>
  <div>
    <v-text-field
      v-model="inputText"
      label="Search"
      hint="Company and Campaign Name"
      clearable
      autofocus
      append-icon="fas fa-search"
      @keyup.enter="addChip"
      @click:append="addChip"
    />
    <!-- 手动展示chip列表 -->
    <v-chip-group>
      <v-chip
        v-for="(item, index) in searchChips"
        :key="index"
        close
        @click:close="removeChip(index)"
      >
        {{ item }}
      </v-chip>
    </v-chip-group>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  name: 'MultiSearch',
  data() {
    return {
      inputText: '',
      searchChips: [],
    }
  },
  methods: {
    addChip() {
      const value = this.inputText.trim()
      if (value && !this.searchChips.includes(value)) {
        this.searchChips.push(value)
        this.inputText = ''
        this.$emit('updateSearch', this.searchChips)
      }
    },
    removeChip(index) {
      this.searchChips.splice(index, 1)
      this.$emit('updateSearch', this.searchChips)
    },
  },
})
</script>

不过这种方式需要自己处理chip的添加、删除和样式，不如v-combobox原生支持的简洁。

内容的提问来源于stack exchange，提问作者curiosityrock