要使此示例正常运行，需要进行多项更改。

首先，您需要更新所显示的内容。我建议打印变量 sourceInfo，而不是您现在拥有的列表，其中将包含过滤后的列表。因此，在 HTML 部分添加某处

{{ sourceInfo }}

进行此更改后，您应该已经在控制台中收到一条错误消息，因为 sourceInfo 的内容现在正在使用，因此最终被评估。该消息的内容如下：

[Vue warn]: Error in render: "TypeError: this.userList is undefined"

因此，您需要将 this.userList 更改为 this.users，这是一个实际变量，包含用户列表：

const res = this.users.filter((user) => ...

又弹出一个错误：

[Vue warn]: Error in render: "TypeError: user.name.toLowerCase().includes(...).sort is not a function"

这个来自于在 boolean 上应用 sort() 函数，该函数预计由 includes() 函数返回。因此，作为最后一步，删除过滤器的 sort() 部分，该部分检查用户是否匹配文本搜索条件，并在返回结果之前应用它：

const res = this.users.filter((user) => {
  return user.name.toLowerCase().includes(this.search.toLowerCase());
});

...

return res.sort(compare);

现在基本功能应该可以工作了。检查下拉列表的过滤器时，您可能会注意到，对于 nok，即使一个用户具有相应的状态，也会返回一个空数组。这是因为下拉元素 nok 已分配值 notok 。因此，只需将值更改为 nok 即可。

nok

这里是运行代码的codesandbox的链接：https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue