Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NoResult slot docs not correct #1720

Open
freezingjune opened this issue Sep 10, 2023 · 3 comments
Open

NoResult slot docs not correct #1720

freezingjune opened this issue Sep 10, 2023 · 3 comments
Labels

Comments

@freezingjune
Copy link

freezingjune commented Sep 10, 2023

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
Copy link
Collaborator

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
Copy link
Author

Ok, this worked. Thanks!

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

@mattelen mattelen added docs and removed question labels Sep 10, 2023
@mattelen mattelen changed the title NoResult slot not working NoResult slot docs not correct Sep 10, 2023
@Dimitri-Habruk
Copy link

Dimitri-Habruk commented Jun 1, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants