如何解决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 举报,一经查实,本站将立刻删除。