Javascript 在VueJS中使用计算属性搜索筛选器

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

我将一个HTML输入链接到一个computed属性，以允许用户搜索。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);
        });
      }
    }
};

{{blog.blogName}


从“/./数据/博客”导入博客；
导出默认值{
数据（）{
返回{
博客：博客，
搜索：“”，
};
},
计算：{
filteredBlogs:函数（）{
返回this.blogs.filter（（blog）=>{
返回blog.blogName.match（this.search）；
});
}
}
};

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

当您编写

this.blogs.filter（…）

时，此指当前的Vue实例。因此，Vue将在

数据

对象中查找

博客

，该对象不存在

在没有看到应用程序的其余部分的情况下，我不知道为什么要导入

博客

，并将其保存到Vue实例中的

俱乐部

键。但要解决当前问题，您可以将

filteredBlogs

computed prop更改为：

this.clubs.filter（…）

，或

blogs.filter（…）

---

请参阅这个正在工作的JS提琴以供参考：

您的Vue实例的数据对象中没有

blogs

键，因此

this.blogs

什么都不是。我很惊讶博客列表竟然出现在第一位…抱歉，俱乐部是个打字错误。。应该是博客。谢谢你的提琴。我将花时间仔细阅读您的答案，学习并修改我的代码。