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

时间:2019-09-23 19:26:38

标签: javascript vue.js vuejs2

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

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

我的代码如下;

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

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

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