我有一个Vue项目,在其中创建了一个Vue组件来显示Blog列表。该组件导入一个JS文件,其中包含每个博客列表的数组。
我已将一个HTML输入链接到一个计算属性,以允许用户搜索。然后,for循环将过滤博客列表并显示相关结果。但是,虽然完整列表会在加载时显示,但是当我在输入中输入搜索查询时,所有内容都会消失,并且控制台中的错误会显示“无法读取未定义的属性'match'”。我在做什么错了?
我的代码如下;
{{#each listItems as |item index|}}
{{#if (eq index 0)~}}
{{item.name}}
{{~else~}}
, {{item.name}}
{{~/if}}
{{/each}}
答案 0 :(得分:1)
编写this.blogs.filter( ... )
时, 此 是指当前Vue实例。因此,Vue将在data
的{{1}}对象中查找,该对象在那里不存在。
我看不到应用程序的其余部分,因此不确定为什么要导入blogs
并将其保存到Vue实例的blogs
键中。但是,要解决您当前的问题,您可以将clubs
计算的prop更改为以下任意一种:
filteredBlogs
,或this.clubs.filter( ... )
有关参考,请参见此工作的JS小提琴:https://jsfiddle.net/voveson/7awythx8/8/
答案 1 :(得分:0)
用blogs.filter替换this.blogs.filter。 “ this”是当前Vue实例,您可以从文件系统导入博客。