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

Question

我有一个 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);
        });
      }
    }
};

Answer 1

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

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

1. this.clubs.filter( ... )，或
2. blogs.filter( ... )

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