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 计算 Prop 更改为:

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

引用这个有效的 JS Fiddle:https://jsfiddle.net/voveson/7awythx8/8/