Блог

Главная - Вопросы по программированию - Фильтрация массива и отображение только отфильтрованных элементов

Фильтрация массива и отображение только отфильтрованных элементов

#vue.js

#vue.js

Вопрос:

Я работаю над своим сайтом, на котором будет размещено мое резюме. Итак, у меня есть множество объектов с жесткими и мягкими навыками

  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 и только мягкие навыки во втором li.
Да, я знаю, было бы намного проще, если бы я просто создал 2 массива и перебирал их для каждого из li, но я хочу бросить себе вызов и отфильтровать массив. Очевидно, фильтровать по «типу». Таким образом, возвращаемый файл должен быть массивом, чтобы я мог циклически просматривать его для отображения данных.

Ответ №1:

Вы можете, например, использовать два computed :

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

Комментарии:

1. Хорошо, спасибо, работает отлично. Не могли бы вы, пожалуйста, кое-что прояснить для меня? Итак, я создаю новое вычисляемое свойство, которое фильтрует массив, а затем перебираю это вычисляемое свойство?

2. @MikeOxhuge Да. В вашем шаблоне Vue вы можете использовать их как обычные переменные. (например <div v-for="skill in hardSkills"></div> )

3. <li v-for="hardSkill in hardSkills" :key="hardSkill.id"> {{ hardSkill.title }} </li> В моем случае hardSkill in hardSkills я проверил, и это не сработало с skill in hardSkills

4. v-for="x in y" означает, что вы сохраняете все элементы y во временной переменной x . Имя переменной может быть любым. Вы можете писать foobar in hardSkills , он все еще работает при использовании foobar.id

5. v-for="ball in hardSkills" :key="ball.id" так не работает. На странице просто пустое поле, когда я меняю hardSkill in hardSkills на anything in hardSkills

Ответ №2:

Вы могли бы создать 2 массива с помощью простого filter , подобного этому

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

Затем перейдите к своему шаблону и выполните цикл по тем, которые есть в вашем шаблоне.

Комментарии:

1. Спасибо, но почему const ? И где я должен это объявить? В data () { return { const hardSkills = skills.filter(skill => skill.type === 'hard') }} или только в экспорте? Я думаю, что вычисляемое свойство проще.

2. Без обид, но, похоже, вам не хватает основ JavaScript 😉 Вероятно, вам следует начать с изучения JS перед Vue.

3. Да, @Byscripts, мне не хватает основ JS. Я пытался выучить его, но это было слишком сложно (возможно, я не смог найти ни одного учебника для начинающих). Итак, узнав, что такое var, функция, массив и объект, я перешел к Vue. Потому что я мог бы найти «учителя», который объясняет вещи очень простым и понятным способом. Не уверен, разрешено ли мне продвигать какой-либо канал YouTube здесь, поэтому я собираюсь рискнуть и сказать: это Shaun Net Ninja.

4. Проверьте bos beginner JS Уэса и потренируйтесь с его JavaScript 30, отличным учителем, но вам нужно будет сосредоточиться, чтобы следовать.