我有一个带有 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
})
}
但我在控制台中得到了这个:
请问有人可以帮助我吗?谢谢!