Vue3 Multiselect组件noResult插槽失效问题求助

你的noResult插槽无法正常触发，核心问题有两个：

1. v-model绑定类型与单选模式冲突 #

你开启了单选模式（:multiple="false"），但v-model绑定的是数组perfiumsname，组件内部状态因此异常，直接干扰了无结果提示的触发逻辑。

修复：
将perfiumsname改为单个值类型（如null或单个对象）：

data () {
  return {
    perfiumsname: null, // 替换原数组类型
    perfiums: [/* 选项数据 */]
  }
}

2. preselect-first属性抑制了无结果提示 #

:preselect-first="true"会让组件初始化时自动选中第一个选项，当搜索无结果时，组件仍会保留该预选项，导致noResult插槽无法显示。

修复：

• 若无需自动预选，直接移除:preselect-first="true"；
• 若必须保留预选，需确保搜索词完全不匹配预选项时，才会触发无结果提示。

额外兼容检查 #

如果你使用的是Vue 3版本的Vue Multiselect（包名@vueform/multiselect），需改用Vue 3的v-slot语法：

<template v-slot:noResult>
  <span>no exist</span>
</template>

修复后的完整代码示例 #

模板部分 #

<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"
    >
      <template slot="noResult">
        <span>no exist</span>
      </template>
    </multiselect>
  </div>
</template>

JS部分 #

import Multiselect from 'vue-multiselect'

export default {
  components: { Multiselect },
  data () {
    return {
      perfiumsname: null,
      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' }
      ]
    }
  }
}

内容的提问来源于stack exchange，提问作者FinishHim