Vuetify v0.17.6：如何获取v-select组件中的自动补全输入文本

嘿，刚好我对Vuetify v0.17.6这个版本的组件特性有点印象，你已经走对路子啦，只需要补全几个小步骤就能拿到用户输入的文本创建新选项：

1. 先把绑定的变量在data里声明好 #

你已经用了:search-value="inputText"来绑定搜索框的输入内容，那得先在组件的data里把这个变量加上，同时确保options和selected也在这儿：

export default {
  data() {
    return {
      inputText: '', // 用来同步用户输入的搜索文本
      selected: null,
      options: [
        // 这里放你的初始选项示例
        { label: '历史搜索1', id: 1 },
        { label: '历史搜索2', id: 2 }
      ]
    }
  },
  // 下面放方法
}

2. 完善你的create方法 #

现在inputText会自动跟着用户的输入更新，你只需要在create方法里直接用它来生成新选项就行，还可以顺手把新选项设为选中状态，体验更流畅：

methods: {
  create() {
    // 先过滤掉空输入，避免创建无效选项
    const newLabel = this.inputText.trim()
    if (!newLabel) return

    // 可选：检查有没有重复的选项，避免重复创建
    const isDuplicate = this.options.some(item => item.label.toLowerCase() === newLabel.toLowerCase())
    if (isDuplicate) {
      alert('这个搜索选项已经存在啦～')
      return
    }

    // 创建新的选项对象，id可以用时间戳临时当唯一标识
    const newOption = {
      label: newLabel,
      id: Date.now()
    }

    // 把新选项加到列表里
    this.options.push(newOption)
    // 自动选中刚创建的选项
    this.selected = newOption
    // 清空搜索框
    this.inputText = ''
  },
  // 你的edit和del方法保持原来的逻辑就行，比如删除可以这样写：
  del(data) {
    const targetIndex = this.options.findIndex(item => item.id === data.item.id)
    if (targetIndex !== -1) {
      this.options.splice(targetIndex, 1)
    }
  },
  edit(data) {
    // 这里写你的编辑逻辑，比如弹出修改框之类的
  }
}

为啥这样可行？ #

在Vuetify v0.17.6里，search-value这个prop是和搜索框的输入双向同步的——用户输入内容时，这个变量会自动更新，所以你直接拿this.inputText就能拿到用户刚输入的文本啦。

这样调整后，当用户输入列表里没有的内容，点击add图标，就能用输入的文本创建新的快速搜索选项了～

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