I'm trying to do a dropdown menu and I used the slot on this page.
<v-list-item inactive :ripple="false">
<v-autocomplete
loading="true"
:menu-props="{ dark: true, maxWidth: 280 }"
v-model="valuesType"
:items="typeArray"
label="Category"
:search-input.sync="searchType"
class="settingsLstItm filtersPanel"
filled
dark
append-icon="mdi-chevron-down"
clear-icon="mdi-close-circle"
:background-color="backgroundDark3"
dense
clearable
multiple
:item-color="yellow"
item-text="color:var(--yellow)"
>
<template v-slot:prepend-item>
<v-list-item
ripple
@mousedown.prevent
@click="toggleType()"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'var(--yellow)' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
<template v-slot:selection="{ item, index }">
<div v-if="valuesType.length === 1">
<span v-if="index === 0 && valuesType[0].length > 16">{{ valuesType[0].slice(0,16) }}... </span>
<span v-if="index === 0 && valuesType[0].length <= 16">{{ valuesType[0] }} </span>
</div>
<div v-if="valuesType.length === 2 ">
<span v-if="index === 0 && valuesType[0].length <= 8">{{ valuesType[0] }}, </span>
<span v-if="index === 0 && valuesType[0].length > 8">{{ valuesType[0].slice(0,8) }}..., </span>
<span v-if="index === 1 && valuesType[1].length <= 8">{{ valuesType[1] }} </span>
<span v-if="index === 1 && valuesType[1].length > 8">{{ valuesType[1].slice(0,8) }}... </span>
</div>
<div v-if="valuesType.length > 2">
<span v-if="index === 0 && valuesType[0].length <= 10">{{ item }}, </span>
<span v-if="index === 0 && valuesType[0].length > 10">{{ valuesType[0].slice(0,10) }}..., </span>
<span
v-if="index === 1"
class="grey--text text-caption spanFilters"
>
+{{ valuesType.length - 1 }} other(s)
</span>
</div>
</template>
</v-autocomplete>
</v-list-item>
Although, on my case, around the select ALL and the rest of the items, there are borders that I can't get removed. Does anyone know how to do that ? That's why it the divider doesn't take the whole space.
