Vue Select：如何动态使用默认过滤器？

问题描述

我有一个带有 Vue-select 的组件。在这个组件中，我想通过 Fuse 动态使用默认过滤器或我的自定义过滤器。

这是我的组件：

<template>
  <vSelect
    v-model="selected"
    :options="options"
    :clearable="clearable"
    :multiple="multiple"
    :placeholder="placeholder"
    :disabled="disabled"
    :appendToBody="toBody"
    :reduce="(option) => option.id ? option.id : option"
    :filter="fuseSearch"
    label="name"
    @input="$emit('input',$event)">
    <span slot="no-options"><em>{{ noOptions }}</em></span>
    <template v-if="state" v-slot:option="option">
      <span :class="`resource-${option.state}`"></span>
      {{ option.name }}
    </template>
  </vSelect>
</template>

<script>
import vSelect from 'vue-select'
import Fuse from 'fuse.js'

export default {
  name: 'MultiSelect',components: { vSelect },props: {
    value: {
      type: [String,Number,Array],default: null
    },options: {
      type: Array,default: () => []
    },placeholder: {
      type: String,state: {
      type: Boolean,default: false
    },noOptions: {
      type: String,default: 'Aucun résultat trouvé.'
    },useFuse: {
      type: Boolean,clearable: Boolean,multiple: Boolean,disabled: Boolean,toBody: Boolean
  },data () {
    return {
      selected: null
    }
  },created () {
    this.selected = this.value
  },methods: {
    searchFilter (options,search) {
      this.useFuse ? this.fuseSearch(options,search) : this.defaultSearch (options,search)
    },fuseSearch (options,search) {
      const fuse = new Fuse(options,{
        keys: ['name','isin'],shouldSort: true
      })
      return search.length ? fuse.search(search).map(({ item }) => item) : fuse.list
    },defaultSearch (options,search) {
      // What should I do here?
    }
  }
}
</script>

当 prop useFilter 为 false 时，我想使用默认过滤器，但我不知道我应该在 defaultSearch() 方法中做什么。

我尝试这样做：

defaultSearch (options,search) {
  return options.filter((option) => {
    let label = typeof option === 'object' ? option.label : option
    if (typeof label === 'number') {
      label = label.toString()
    }
    return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
  })
}

但我在控制台中得到了这个：

请问有人可以帮助我吗？ 谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）