微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vue Select:如何动态使用默认过滤器?

如何解决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
  })
}

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

console

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?