Как в vue фильтровать массив?

Question

[YakovSpb]

У меня есть два массива... Сначала выводится первый с тремя элементами, а затем в каждом этом элементе выводится фильтр массива. Если в родительском элементе id тега такой-то, то выводится массивы с определенным свойством.

computed: {
        tasksFilter: function() {
          return this.tasks.filter(function(t) {
            return t.category == 'work'
          })
        }
      }
        boards:[
        {id:'board-1', title:'В работе'},
        {id:'board-2', title:'На проверке'},
        {id:'board-3', title:'Выполнено'}
        ],
[
	{"id":"1","category":"work","title":"Пример текста карточки", "desc":"Описание"},
	{"id":"2","category":"work","title":"Пример длинного текста карточки, да такого чтобы он вообще не поместился","desc":"Lorem Ipsum ."},
	{"id":"3","category":"work","title":"Пример текста карточки2", "desc":"Еще одно описание"},
	{"id":"4","category":"test","title":"Пример текста карточки3", "desc":"Еще одно описание"},
	{"id":"5","category":"done","title":"Пример текста карточки4", "desc":"Еще одно описание"}
]

Comments

[YakovSpb]

Хотел использовать v-for вместе с v-if но пишут, что не правильно

[Сергей Соколов]

чисто-JS возможностей тут не хватает?

Answer 1

[0xD34F]

Здесь нужна не фильтрация, а группировка.

В элементы board добавьте свойство, значения которого будут повторять значения свойства category у элементов массива tasks. Типа имя категории, обозвать можно name.

computed: {
  tasksGroupedByCategory() {
    return this.tasks.reduce(
      (acc, n) => (acc[n.category].push(n), acc),
      Object.fromEntries(this.boards.map(n => [ n.name, [] ]))
    );
  },
},

<div v-for="b in boards">
  <h2>{{ b.title }}</h2>
  <div v-for="n in tasksGroupedByCategory[b.name]">
    {{ n.title }}
  </div>
</div>

https://jsfiddle.net/p6k8m527/1/

Comments

[YakovSpb]

Спасибо...
Работает, но ошибка выходит TypeError: "tasksGroupedByCategory[b.name] is undefined"

[0xD34F]

YakovSpb, и? Никаких идей о причинах её возникновения? А если подумать? Хотя бы три минуты?

[YakovSpb]

0xD34F, ну может слишком рано обращается к b.name

[0xD34F]

YakovSpb, обращается кто? Ни слова больше, вы даже ОДНО предложение не можете написать так, чтобы вас поняли. Воспроизводите свою ситуацию в песочнице, ссылку сюда.

[YakovSpb]

0xD34F, Нашел...
у меня массив из json подгружается

created () {
        fetch('tasks.json')
        .then(res => res.json())
        .then(tasks =>{
          this.tasks = tasks

        })
      },