Question

我正在我的网站上工作，那里有我的简历。所以我有一系列具有硬性和软性技能的对象

 skills: [
  { id: "1", type: "hard", title: "Technical skills" },
  { id: "2", type: "hard", title: "Computer skills" },
  { id: "3", type: "hard", title: "Microsoft Office skills" },
  { id: "4", type: "hard", title: "Analytical skills" },
  { id: "5", type: "hard", title: "Marketing skills" },
  { id: "6", type: "hard", title: "Presentation skills" },
  { id: "7", type: "hard", title: "Management skills" },
  { id: "8", type: "hard", title: "Project management skills" },
  { id: "9", type: "hard", title: "Writing skills" },
  { id: "10", type: "hard", title: "Language skills" },
  { id: "11", type: "hard", title: "Design skills" },
  { id: "12", type: "soft", title: "Leadership Skills" },
  { id: "13", type: "soft", title: "Teamwork" },
  { id: "14", type: "soft", title: "Communication Skills" },
  { id: "15", type: "soft", title: "Problem-Solving Skills" },
  { id: "16", type: "soft", title: "Work Ethic" },
  { id: "17", type: "soft", title: "Flexibility/Adaptability" },
  { id: "18", type: "soft", title: "Interpersonal Skills" },
],

所以我有两个 li。所以我只需要在第一个里展示硬技能，在第二个里只展示软技能。是的，我知道如果我只制作 2 个数组并为每个 li 循环遍历它们会容易得多，但我想挑战自己并过滤数组。显然是按“类型”过滤的。所以返回的必须是一个数组，所以我可以循环遍历它来显示数据。

Answer 1

例如，您可以使用两个 computed：

computed: {
  hardSkills() {
    return this.skills.filter(skill => skill.type === 'hard');
  },
  softSkills() {
    return this.skills.filter(skill => skill.type === 'soft');
  }
}

Answer 2

您可以像这样使用简单的 filter 创建 2 个数组

const hardSkills = skills.filter(skill => skill.type === 'hard')
const softSkills = skills.filter(skill => skill.type === 'soft')

然后，转到模板并循环使用模板中的内容。

过滤数组并仅显示过滤的项目

2 个答案: