Vuetify Autocomplete, item-slot , 保持字符高亮

Posted 2023-02-23

【中文标题】Vuetify Autocomplete, item-slot , 保持字符高亮

【英文标题】：Vuetify Autocomplete, item-slot , keep the highlighting of character

【发布时间】：2019-03-20 02:25:03

【问题描述】：

如果您替换了项目的scoped-slot，如何保持字符的默认突出显示。

https://vuetifyjs.com/en/components/autocompletes#scopedSlots

默认，将输出一个 v-list，其中输入中的每个字符在输出中都“突出显示”。

<v-autocomplete
                    v-model="model"
                    :items="items"
                    :loading="isLoading"
                    :search-input.sync="SomeApiDataCall"
                    item-text="name"
                    item-value="id"
                   >

            </v-autocomplete>

Custom scoped-slot：我想改变列表的设计，但想保留“突出显示”的输出

    <v-autocomplete
                            v-model="model"
                            :items="items"
                            :loading="isLoading"
                            :search-input.sync="SomeApiDataCall"
                            item-text="name"
                            item-value="id"
                           >

        <template  slot="item"
                   slot-scope=" item, tile "
         >   
            <v-list-tile-content  >
                 <!--the html output needs to be highlighted-->  
                <v-list-tile-title v-html="item.name"></v-list-tile-title>
            </v-list-tile-content>

         </template>

</v-autocomplete>

VAutocomplete 导入 > VSelect，导入 > VSelectList

VSelectList 有一个名为 genFilteredText

的函数

https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VSelect/VSelectList.js#L112

这会做我想要的。如何在自定义作用域插槽中实现这一点？

谢谢。

【参考方案1】：

slot-scope Item 也可以接收“父”。 之后你就可以访问它上面的任何方法了。

<template
    slot="item"
    slot-scope=" parent, item, tile "
>
    <v-list-tile-content>
        <!-- Highlight output item.name -->  
        <v-list-tile-title
            v-html="parent.genFilteredText(item.name)"
        > 
        </v-list-tile-title>
    </v-list-tile-content>
</template>

【参考方案2】：

我对 vue 很陌生，我花了一段时间才将这个问题/解决方案翻译成新的 Slots 语法。

对于同样使用新的v-slot:item="data" 语法的任何人，您可以按如下方式接收父级：

<template v-slot:item=" parent, item ">
    <v-list-tile-content  >
         <!--Highlight output item.name-->  
         <v-list-tile-title 
              v-html="`$parent.genFilteredText(item.name)`"
         ></v-list-tile-title>
    </v-list-tile-content>
</template>