Open freezingjune opened 11 months ago
mmm. @freezingjune does this work using the v-slot attr? If so, we need to update the examples
https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots
Ok, this worked. Thanks!
<template v-slot:noResult>
<span>No Matches found.</span>
</template>
Ok, this worked. Thanks!
<template v-slot:noResult> <span>No Matches found.</span> </template>
no work on my side.. i use nuxt 3 `<multiselect v-model="value" :disabled=" !( authStore.isAdmin || innerStore.elementOwner || popupStore.mode === 'popup' ) || props.disabled === true " tag-placeholder="Add this as new tag" label="name" :options="optionsData" :placeholder=" value.length > 0 || props.disabled ? '' : 'Select one or multiple categories' " track-by="code" :close-on-select="ifMultipleSelect ? false : true" :multiple="ifMultipleSelect" :taggable="'issuers' !== entityProperty" :searchable="true" :internal-search="false" :hide-selected="true" :style="{ border: showError === true && rotateCaret === false && props.status === 'mandatory' ? '1px solid #ff4757' : rotateCaret == true ? '1px solid #1E90FF' : '1px solid #ced6e0', zIndex: showError === true && props.status === 'mandatory' ? '1001' : rotateCaret === true ? '1002' : '0', }" deselect-label="" :loading="isLoading" @select="onSelect" @open="onOpen" @close="onClose" @search-change="fetchDebounced" @remove="handleTagRemoved" no-results-text="'No results found'" :showNoOptions="true"
<template #caret="{ toggle }"> <div class="d-flex align-items-center justify-content-end h- 100 w-32px bl-1px-primary-70 position-absolute" style="top: 9px; right: 12px; height: calc(100% - 16px)" @mousedown.prevent.stop="toggle"
<div v-if="value.length > 1 || !ifMultipleSelect" style="left: -24px; margin-bottom: 5px" class="position-absolute" @click="removeAllTags"
<img v-if=" (authStore.isAdmin || innerStore.elementOwner) && props.disabled === false " src="/icons/delete-black.svg " alt="" class="h-14px deleteAllItems" :class="{ 'opacity-0': value.length === 0 }" />
<div
class="w-1px h-20px mr-12px"
style="background-color: #ced6e0"
></div>
<img
v-if="!props.disabled"
:src="
value.length === 0
? '/icons/arrow-open-dropdown-lightgray.svg'
: '/icons/arrow-open-dropdown.svg'
"
alt="Your Custom Icon"
/>
</div>
</template>
<template #singleLabel="{ option }">
<span class="multiselect__single">
{{ option.name }}
</span>
</template>
<template #beforeList>
<div>
+Add Case
</div>
</template>
<template #afterList>
<div>
<div v-if="isLoading" class="loader">
<LoadingWithgif :inside-dropdown="true" />
</div>
<div
v-if="!isLoading"
class="h-106px"
>
<NodatafoundTable />
</div>
</div>
</template>
<template #noResult>
<span>No Matches found.</span>
</template>
</multiselect>`
Followed the documentation but for some reason the noResults slot isn't working. The text is not getting displayed
Expected behaviour
It should show "No Matches found."
Actual behaviour
It shows default text "No elements founds. Consider changing the search query."