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

Question

我制作了一个 v-autocomplete，但它突出显示了列表中用户未输入的 words/chars。

v-自动完成代码：

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

你可以在codepen中找到它：https://codepen.io/maikenmadsen92/pen/ZEEZjYM?editors=1010

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

Answer 1

您的 v-autocomplete 的实现存在一些问题。你的过滤器是无用的，因为它总是 return true 这就是为什么所有 words/chars 都是亮点。自从遵循文档 vuetify

以来，主要问题是您的项目文本

item-text :
Set property of items's text value

这意味着你 item-text=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>

Answer 2

我可以使用 getMaskedCharacters 来解决问题

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

Wants to highlight only chars the user types in the input v-autocomplete

vue.js

vuetify.js

v-autocomplete