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

Question

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

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

我的代码如下；

  {{#each listItems as |item index|}}
    {{#if (eq index 0)~}}
      {{item.name}}
    {{~else~}}
      , {{item.name}}
    {{~/if}}
  {{/each}}

Answer 1

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

我看不到应用程序的其余部分，因此不确定为什么要导入blogs并将其保存到Vue实例的blogs键中。但是，要解决您当前的问题，您可以将clubs计算的prop更改为以下任意一种：

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

有关参考，请参见此工作的JS小提琴：https://jsfiddle.net/voveson/7awythx8/8/

Answer 2

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