NoResult slot docs not correct

[freezingjune]

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."

[Matt]

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

[freezingjune]

Ok, this worked. Thanks!

<template v-slot:noResult>
  <span>No Matches found.</span>
</template>

[Dimitri Habruk]

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>`