当我们在搜索框中输入时，如何使 vue 动态过滤选项？

Question

我希望 Vue 在我们输入内容时动态过滤搜索框中可用的选项。截至目前，它只是显示整个选项列表，没有任何过滤（即使我们键入）。

<el-form-item label="Filename" required>
              <el-select
                v-model="queryform.fileUuid"
                :remote-method="getFilenames"
                :loading="loading"
                filterable
                remote
                reserve-keyword
              >
                <el-option
                  v-for="(item, idx) in filenameOptions"
                  :key="idx"
                  :label="item.filename"
                  :value="item.uuid"
                />
              </el-select>
            </el-form-item>

filenameOptions 已填充并包含以下形式的对象：

{ "filename" : "foo", "uuid" : "bar" }

以下代码块遵循与上一个块相同的逻辑，按预期工作：

              <el-select
                v-model="form.project"
                :remote-method="getProjects"
                :loading="loading"
                filterable
                remote
                reserve-keyword
              >
                <el-option
                  v-for="(item, idx) in projectOptions"
                  :key="idx"
                  :label="item.key"
                  :value="item.key"
                />

我不知道发生了什么问题。任何见解将不胜感激。

Answer 1

您是否定义了 getFilenames 方法并且其工作方式类似于 docs for remote search 上的示例？由于您在 el-select 元素上定义了 :remote-method 属性，因此您需要确保提供有效的过滤器函数。

如果您只想根据用户在 select 元素中输入的内容来过滤选项标签，您可能会发现 options filtering select element` 清洁器可以使用。

当我们在搜索框中输入时，如何使 vue 动态过滤选项？

How to make vue dynamically filter options as we type in the search box?

javascript

vue.js

filter

element-ui