0

我有一个带有 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,
      default: null
    },
    state: {
      type: Boolean,
      default: false
    },
    noOptions: {
      type: String,
      default: 'Aucun résultat trouvé.'
    },
    useFuse: {
      type: Boolean,
      default: false
    },
    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 为 false 时,我想使用默认过滤器useFilter,但我不知道在我的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
  })
}

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

安慰

请问有人可以帮助我吗?谢谢!

4

0 回答 0