NoResult slot docs not correct

freezingjune commented 1 year ago

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

mattelen commented 1 year 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

https://vuejs.org/guide/components/slots.html#named-slots

freezingjune commented 1 year ago

Ok, this worked. Thanks!

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

Dimitri-Habruk commented 5 months ago

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

shentao / vue-multiselect

NoResult slot docs not correct #1720

Expected behaviour

Actual behaviour