vue.js - 在 Quasar Select 上始终首先过滤选择

Question

我正在使用 Quasar Framework 并使用带有过滤器的 Q-Select。我想第一个过滤的选项总是已经被标记，因为如果我按回车，第一个将被选中。

Answer 1

如果过滤选项长度>0，则有一个选项可以在过滤方法中设置模型值。

filterFn (val, update, abort) {
  update(() => {
    const needle = val.toLowerCase()
    this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)

    if(this.options.length>0 && this.model!=''){
      this.model = this.options[0];
    }
  })
}

Codepen - https://codepen.io/Pratik__007/pen/QWjYoNo

Answer 2

经过一些研究，我发现了如何以通用方式实现这一目标。在 filterFn 接收到的函数更新的第二个参数是 QSelect 本身的实例。

因此，我们可以使用

ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);

将焦点放在第一个过滤元素上，无论是否多选。

最终代码类似于

filterFn(val, update) {
        update(
            () => {
                const needle = val.toLocaleLowerCase();
                this.selectOptions = this.qSelectOptions.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1);
            },
            ref => {

                ref.setOptionIndex(-1);
                ref.moveOptionSelection(1, true);
            });
    }