1

我做了一个 v-autocomplete，但它突出显示了列表中用户没有输入的单词/字符。

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

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

4

2 回答 2

1

v-autocomplete 的实现存在一些问题。您的过滤器是无用的，因为它总是会返回 true，这就是为什么所有单词/字符都是突出显示的原因。主要问题是您遵循 doc vuetify后的 item-text

item-text :
设置项目文本值的属性

意思是你 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>
于 2019-11-25T12:38:05.223 回答
0

我可以使用 getMaskedCharacters 来解决问题

于 2020-09-30T06:50:03.303 回答