Vue.js 只想突出显示用户在输入v-autocomplete中键入的字符

我做了一个v-autocomplete，但它突出显示了列表中用户尚未键入的单词/字符

v-autocomplete代码：

<v-autocomplete
  :filter="() => true"
  item-text="states.text"
  :items="states"
  filled
  rounded
  v-model="model"
  :search-input.sync="search">
    <template
      slot="item"
      slot-scope="{ parent,item }"
            >
            <v-list-tile-content  >
              <v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`"> 
              </v-list-tile-title>
           </v-list-tile-content>
    </template>
</v-autocomplete>

您可以在代码笔中全部使用：

---

是否可以只突出显示用户在输入中键入的单词？

您的v-autocomplete的实现存在一些问题。 你的过滤器是无用的，因为它总是返回true，这就是为什么所有单词/字符都是高亮显示的原因。 主要的问题是你的项目文本，因为下面的文件

项目文本：
设置项的文本值的属性

使用mean you item text=文本，因为项目已设置为状态

<v-autocomplete
  item-text="text"
  :items="states"
  filled
  rounded
  v-model="model"
  :search-input.sync="search">
    <template
      slot="item"
      slot-scope="{ parent,item }"
            >
            <v-list-tile-content  >
              <v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`"> 
              </v-list-tile-title>
           </v-list-tile-content>
    </template>
</v-autocomplete>

我可以用getMaskedCharacters来做这个把戏

非常感谢你，弗兰克，为了完全理解你的回答，是物品文本做了这个把戏吗？：-）