总是在 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);
            });
    }

总是在 Quasar Select 上首先过滤选择

Always first filtered selected on Quasar Select

vue.js

quasar