Блог

Главная - Вопросы по программированию - Фильтровать список во время выполнения цикла for в Vue

Фильтровать список во время выполнения цикла for в Vue

#vue.js #vuex

#vue.js #vuex

Вопрос:

У меня есть этот список, и я должен отображать в разных подразделениях список active из списка и те, кто есть inactive .

 <v-ons-card
  v-for="item in items.data"
  :key="item.id"
> </v-ons-card>

Элементы приходят для этой части кода.

 computed: mapState({
    items: state => state.items.items
  })

state.items выглядит так

 const state = {
  items: {
    data: [],
  },
};

Я думаю, смогу ли я это сделать,

 v-for="item in items.data.active"

Могу ли я как-нибудь это сделать?

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

1. Можете ли вы поделиться тем , как вы state.items выглядите ?

2. обновил контент. Это выглядит примерно так.

3. Как вы определяете, являются ли данные активными или неактивными?

4. Вы можете попробовать использовать v-if="true === item.active" в списке активных divs и v-if="false === item.active" в списке неактивных. Но лучшее решение — создать getters в вашем магазине, чтобы они могли фильтровать элементы записи, а не портить вашу часть просмотра приложения.

Ответ №1:

Я думаю, это то, что вы ищете:

 computed: {
    activeItems() {
      return this.items.data.filter((x) => x.active);
    },
    inactiveItems() {
      return this.items.data.filter((x) => !x.active);
    },
  },
 
 <div>Active items:</div>
<v-ons-card
  v-for="item in activeItems"
  :key="item.id"
></v-ons-card>

<div>Inactive items:</div>
<v-ons-card
  v-for="item in inactiveItems"
  :key="item.id"
></v-ons-card>

Ответ №2:

Используйте геттеры в Vuex или вычисляемом свойстве.