Question

我做了一个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>

您可以在密码笔中查看所有内容：https://codepen.io/maikenmadsen92/pen/ZEEZjYM?editors=1010

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

Answer 1

v-autocomplete的实现存在一些问题。您的筛选器没有用，因为它总是会返回true，这就是为什么所有单词/字符都是突出显示的原因。而且主要的问题是您的项目文本，因为遵循文档vuetify

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

意思是您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中输入的字符

2 个答案: