在 VueJS 中使用计算属性搜索过滤器

Posted 2023-02-23

【中文标题】在 VueJS 中使用计算属性搜索过滤器

【英文标题】：Search filter using a computed property in VueJS

【发布时间】：2020-01-23 21:48:39

【问题描述】：

我有一个 Vue 项目，我在其中创建了一个 Vue 组件来显示博客列表。该组件导入一个 JS 文件，其中包含每个博客列表的数组。

为了允许用户搜索，我已将一个 html 输入链接到计算属性。然后 for 循环将过滤博客列表并显示相关结果。但是，尽管加载时显示完整列表，但当我在输入中输入搜索查询时，所有内容都会消失，并且控制台中的错误显示“无法读取未定义的属性'匹配'”。我做错了什么？

我的代码如下；

<ul>
  <li v-for="blog in filteredBlogs">
      blog.blogName
  </li>
</ul>


import blogs from "./../data/blogs";
export default 
    data() 
        return 
            blogs: blogs,
            search:'',
        ;
    ,
    computed: 
      filteredBlogs:function()
        return this.blogs.filter((blog) => 
           return blog.blogName.match(this.search);
        );
      
    
;

【问题讨论】：

你的 Vue 实例在其数据对象中没有 blogs 键，所以 this.blogs 什么都不是。我很惊讶博客列表甚至出现在首位......

【参考方案1】：

将 this.blogs.filter 替换为 blogs.filter。 “this”是当前的 Vue 实例，你从文件系统导入博客。

【参考方案2】：

当你写 this.blogs.filter( ... ) 时，this 指的是当前的 Vue 实例。因此，Vue 将在 data 对象中查找 blogs，但该对象并不存在。

没有看到您的应用程序的其余部分，我不确定您为什么要导入 blogs 并将其保存到 Vue 实例中的 clubs 键。但要解决您当前的问题，您可以将您的 filteredBlogs 计算属性更改为：

this.clubs.filter( ... )，或者 blogs.filter( ... )

请参阅此工作 JS Fiddle 以供参考：https://jsfiddle.net/voveson/7awythx8/8/

【讨论】：

抱歉，clubs 打错了.. 应该是博客。谢谢你的小提琴。我会花时间检查你的答案来学习和修改我的代码。