vue3 multiselect noResult slot does not work

39 Views Asked by At

I want to change the vue multiselect's noResult message.

I coded that :

<template>
   <div>
  <multiselect class="selectmulti w-[600px]"  searchable="true"  v-model="perfiumsname" :options="perfiums" :select-label="'انتخاب|اینتر'" :selected-label="'انتخاب شده'" :deselect-label="'حذف'" :hideSelected="false" :multiple="false" :close-on-select="true" :clear-on-select="false" :preserve-search="true" placeholder="اسنس مورد نظر را انتخاب کنید..." label="name" track-by="name" :preselect-first="true">
    <template slot="noResult">
      <span>no exist</span>
    </template>
   
  </multiselect>
  <!-- <pre class="language-json"><code>{{ value  }}</code></pre> -->
</div>


  </template>

My js codes which related to multiselect

import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  
  data () {
    return {
      perfiumsname: [],
      perfiums: [
        { name: 'اونتوس کرید گرید های - Aventus Creed Hi Grade', price: '121' },
        { name: '۲۱۲ زنانه - 212 for women', price: '341' },
        { name: 'Rails', price: '32' },
        { name: 'Sinatra', price: '55' },
        { name: 'Laravel', price: '21' },
        { name: 'Phoenix', price: '44' }
      ],
    }
  },
  methods:{
  }
}

What is the problem? Thanks for your help.

1

There are 1 best solutions below

1
FinishHim On

I fix this prolem :) probably somebody will need this :)

  <multiselect class="selectmulti w-[600px]" noResult="sasasa" :searchable="true"  v-model="perfiumsname" :options="perfiums" :select-label="'انتخاب|اینتر'" :selected-label="'انتخاب شده'" :deselect-label="'حذف'" :hideSelected="false" :multiple="false" :close-on-select="true" :clear-on-select="false" placeholder="اسنس مورد نظر را انتخاب کنید..." label="name" track-by="name" :preselect-first="true">
<template v-slot:noResult>
  <span>محصولی یافت نشد!</span>
</template>