Question

如果替换项目的作用域，如何保持默认的字符高亮显示。

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>

自定义作用域广告位：我想更改列表的设计，但希望保留“突出显示”的输出

    <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

那会做我想要的。如何在自定义范围内的插槽中实现这一点？

谢谢。

Answer 1

狭槽作用范围内的物品也可以接收“父母”。之后，您可以访问其上的任何方法。

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

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

Vuetify自动完成，项目版位，保持突出显示字符

2 个答案: