vue-multiselect
vue-multiselect copied to clipboard
shentao
NoResult slot docs not correct
Followed the documentation but for some reason the noResults slot isn't working. The text is not getting displayed
<div class="me-3 d-flex gap-3">
<div class="filter-group-select">
<VueMultiselect
v-model="selectedFilterGroups"
:options="newGroupFilterOptions"
:limit="1"
group-select
multiple
group-values="options"
group-label="name"
placeholder="Filter by Group"
label="name"
track-by="id"
openDirection="bottom"
deselectLabel=""
selectLabel=""
selectGroupLabel="Select group"
>
<span slot="noResult">No Groups found.</span>
</VueMultiselect>
</div>
</div>
Expected behaviour
It should show "No Matches found."
Actual behaviour
It shows default text "No elements founds. Consider changing the search query."
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
https://vuejs.org/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"
>
<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>`
