quasar q-select 将过滤事件用作常用功能不起作用

Question

我试试这个@filter 事件示例

https://quasar.dev/vue-components/select#example--basic-filtering

可以工作

Index.vue

<template>
  <q-select
    :options="options"
    @filter="filter"
    v-model="model"
    use-input
  ></q-select>
</template>

<script>
import { defineComponent } from "vue";
import { computed, reactive, toRefs, ref } from "vue";
const selectedOptions = ["Google", "Facebook", "Twitter", "Apple", "Oracle"];

export default defineComponent({
  name: "PageIndex",
  setup() {
    let state = reactive({
      model: null,
      options: selectedOptions,
    });

    const filter = (val, update, abort) => {
      update(() => {
        const needle = val.toLowerCase()
        state.options = selectedOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
      })
    }

    return {
      filter,
      selectedOptions,
      ...toRefs(state),
    };
  },
});
</script>

我想使用 utils/filter.js 的常用功能，但无法使用

Index.vue

<template>
  <q-select
    use-input
    :options="options"
    @filter="
      (val, update, abort) =>
        filter(val, update, abort, selectedOptions, options)
    "
    v-model="model"
  >  </q-select>
</template>

<script>
import { defineComponent } from "vue";
import { computed, reactive, toRefs, ref } from "vue";
import { filter } from "../utils/filter";
const selectedOptions = ["Google", "Facebook", "Twitter", "Apple", "Oracle1"];

export default defineComponent({
  name: "PageIndex",
  setup() {
    let state = reactive({
      model: null,
      options: selectedOptions,
    });

    return {
      filter,
      selectedOptions,
      ...toRefs(state),
    };
  },
});
</script>

utils/filter.js

export function filter(val, update, abort, from, to) {
  update(() => {
    const needle = val.toLowerCase()
    to.value = from.filter((v) => v.toLowerCase().indexOf(needle) > -1)
  })
}

如何使过滤起作用？

工作版 https://codesandbox.io/s/blissful-brattain-vd085n?file=/src/pages/Index.vue

不是工作版本 https://codesandbox.io/s/blissful-brattain-vd085nv2-forked-feiv7v?file=/src/pages/Index.vue

Answer 1

最后我将其传递给函数并更改它

@filter="(val, update, abort) => filter(val, update, abort, selectedOptions, 'options' ,this)"

filter.js

export const filter = (val, update, abort, from, key, vm) => {
  update(() => {
    const needle = val.toLowerCase()
    vm[key] = from.filter((v) => v.toLowerCase().indexOf(needle) > -1)
  })
}

询问 v2 版本后更好的做法

@filter="filterHandler"

const filterHandler = (val, update) => {
      update(() => {
        options.value = filter(val, oriOptions)
      })
    }

//filter.js
export const filter = (val, options) => {
  if (val === '') return options
  const needle = val.toLowerCase()
  return options.filter((v) => v.toLowerCase().indexOf(needle) > -1)
}

quasar q-select 将过滤事件用作常用功能不起作用

quasar q-select use filter event as a common function not work

javascript

vue.js

quasar-framework