Slot vuetify : append and prepend item

Viewed 29

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] }},&nbsp; </span>
                <span v-if="index === 0 && valuesType[0].length > 8">{{ valuesType[0].slice(0,8) }}...,&nbsp; </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 }},&nbsp; </span>
              <span v-if="index === 0 && valuesType[0].length > 10">{{ valuesType[0].slice(0,10) }}...,&nbsp; </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.

That's what it looks like

0 Answers
Related