DYNAMIC SLOT
The assumption is you’re familiar with slots in Vue.js; if not, click here for more information. One key difference between DynamicMultiSelect and SearchSelect is that DynamicMultiSelect offers slot support. This allows you to fully customize the display content within the input box, replacing the default message (e.g., "1 selected") with tailored options such as names, images, flags, custom CSS classes, and more. The slot feature puts you in control of how your selections are presented to the user.
USE CASES
Scenario 1:
Display first and last names of items selected in the list.
Output
No Selection
Code Sample
<template>
<DynamicMultiSelect
:data="peopleData"
:selectMax="5"
placeholderName="Employee"
display-key="firstName lastName"
v-model="people"
primary-key="id"
>
<template #dynamicAction="{ item }">
{{ fullNameList(item) }}
</template>
</DynamicMultiSelect>
<template>
<script setup lang="ts">
interface Person {
firstName: string;
lastName: string;
}
const fullNameList = (item: Person[]) => {
let allItems = item
?.map((obj) => `${obj.firstName} ${obj.lastName}`)
.join(", ");
return allItems;
}
</script>
Scenario 2:
Alongisde first and last name, show a tag.
Output
No Selection
Code Sample
<DynamicMultiSelect
:data="peopleData"
:selectMax="5"
placeholderName="Employee"
display-key="firstName lastName | continent"
v-model="people"
primary-key="id"
img-prefix=""
>
<template #dynamicAction="{ item }">
<div v-for="(person, index) in item" :key="person.id">
<div style="display: flex">
<span
:class="
person.continent === "North America"
? "red-circle"
: "blue-circle"
"
></span>
<div style="margin-right: 2px">
<span>{{ person.firstName }} {{ person.lastName }}</span>
<span v-if="index < item.length - 1">, </span>
</div>
</div>
</div>
</template>
</DynamicMultiSelect>Scenario 3:
Show images only. In this scenario we will assume images is part of the object.
Output
No Selection
Code Sample
<DynamicMultiSelect
:data="peopleData"
:selectMax="5"
placeholderName="Employee"
display-key="firstName lastName | continent"
v-model="people"
primary-key="id"
>
<template #dynamicAction="{ item }">
<div v-for="person in item" :key="person.id">
<img
style="
border-radius: 999px;
height: 20px;
width: 20px;
margin-right: 3px;
"
:src="person.src"
/>
</div>
</template>
</DynamicMultiSelect> You can manipulate this anyway you like, you can explore so many scenarios, it's your choice.