Display content with vuetify template v-slot=prepend-item-CodePudding

I used this template to display a list of selected items from my database. https://vuetifyjs.com/en/components/selects/#append-and-prepend-item

<v-list-item
  two-line
  inactive
  :ripple="false"
  dense
  style="margin-top: 15px"
>
 <v-autocomplete
   v-model="valuesConnection"
   :items="connectionArray"
   label="Relationship"
   :search-input.sync="searchConnection"
   
   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)"
   loading="true"
   :menu-props="{ dark: true, maxWidth: 280 }"
>
  <template v-slot:prepend-item>
    <v-list-item
     ripple
     @mousedown.prevent
     @click="toggle"
   >
    <v-list-item-action>
      <v-icon :color="valuesConnection.length > 0 ? 'var(--yellow)' : ''">
        {{ icon }}
      </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 ></v-divider>
      </template>
     </v-autocomplete>
   </v-list-item>

But I'd like to choose how they are displayed in the span below. For example, when I'm chosing to select them all, I don't want them all to appear on the span, but only the first one and them {{the rest}} others.

Actually, it would be a mix of 2 templates but I don't know how to get them to work together. The templates v-slot:selection="{ item, index } and v-slot:prepend-item would make a perfect combination of the result I want.

CodePudding user response：

I think this should do that, simply adding the template for #selection under the earlier template.

<v-list-item
  two-line
  inactive
  :ripple="false"
  dense
  style="margin-top: 15px"
>
 <v-autocomplete
   v-model="valuesConnection"
   :items="connectionArray"
   label="Relationship"
   :search-input.sync="searchConnection"
   
   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)"
   loading="true"
   :menu-props="{ dark: true, maxWidth: 280 }"
>
  <template v-slot:prepend-item>
    <v-list-item
     ripple
     @mousedown.prevent
     @click="toggle"
   >
    <v-list-item-action>
      <v-icon :color="valuesConnection.length > 0 ? 'var(--yellow)' : ''">
        {{ icon }}
      </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 ></v-divider>
      </template>
      <template v-slot:selection="{ item, index }">
        <v-chip v-if="index === 0">
          <span>{{ item }}</span>
        </v-chip>
        <span
          v-if="index === 1"
          
        >
           {{ value.length - 1 }} others
        </span>
      </template>
     </v-autocomplete>
   </v-list-item>

You can usually add however many templates you want inside the component.