VueJs - Условный оператор / фильтр для v-for результатов - PullRequest
Новая
       42

VueJs - Условный оператор / фильтр для v-for результатов

1 голос
/ 23 апреля 2020

Так что теперь я делаю это, чтобы упорядочить свои результаты по категориям, но если мне кажется, что это может быть лучше: 

<div><h2>Gloves</h2></div>
<div v-for="stash in stashes" :key="stash.id">
  <div v-for="item in stash.items" :key="item.id">
    <div v-if="item.extended.subcategories[0] === 'gloves'">
      {{ item.extended.baseType }}
    </div>
  </div>
</div>
<div><h2>Boots</h2></div>
<div v-for="stash in stashes" :key="stash.id2">
  <div v-for="item in stash.items" :key="item.id2">
    <div v-if="item.extended.subcategories[0] === 'belt'">
      {{ item.extended.baseType }}
    </div>
  </div>
</div>
<div><h2>Helmets</h2></div>
..
<div><h2>Weapons</h2></div>
..

Если найдено , эта статья делает это с вычисляемым свойством и я чувствую, что так должно быть, но я не могу заставить его работать (также, потому что мне нужен аргумент, чтобы он работал так, я думаю?): 

  computed: {
    filter(category) {
      return this.stashes.items.filter(a => a.extended.subcategories[0] === category);
    }
  }

, а затем что-то вроде этого: 

<div v-for="item in filter('gloves')" :key="item.id">
 ..
</div>

Но да, это говорит о том, что я не могу передать аргумент в пользу l oop, как это, поэтому на этом я и закончил.

Кто-нибудь понял, как сделать это?

Тайники выглядят так: 

stashes: [
  {
    id: 1
    items: [{
      name: 'lorem',
      extended: {
        subcategories: ["gloves"]
      }
    }]
  },
  {
    id: 2
    items: [{
      name: 'ipsum',
      extended: {
        subcategories: ["boots"]
      }
    }]
  },
]

Ответы [ 2 ]

2 голосов
/ 23 апреля 2020

Хотя использование метода в шаблоне может решить эту проблему, это не очень хороший шаблон, поскольку он вызывает запуск метода каждый раз, когда шаблон переопределяется по любой причине. Добавьте еще один уровень v-for: 

<div v-for="category in categories" :key="category">
  <div><h2>{{ category }}</h2></div>
  <div v-for="stash in stashes" :key="stash.id">
    <div v-for="item in stash.items" :key="item.id">
      <div v-if="item.extended.subcategories[0] === category">
        {{ item.extended.baseType }}
      </div>
    </div>
  </div>
</div>

и создайте массив категорий, таких как: 

data() {
   return {
      categories: ['gloves','belt']
   }
}
0 голосов
/ 23 апреля 2020

Вы можете достичь этого, возвращая метод из вашего вычисления, но я не рекомендую это решение. Вместо вычислений я рекомендую использовать метод.

[РЕКОМЕНДУЕТСЯ] 

method: {
    filter(category) {
      return this.stashes.items.filter(a => a.extended.subcategories[0] === category);
    }
  }

[ИСПОЛЬЗОВАТЬ В КОМПЬЮТЕРНОМ] 

computed: {
    filter() {
      return category => this.stashes.items.filter(a => a.extended.subcategories[0] === category);
    }
  }

Здесь вы можете прочитать немного больше об этом: Почему я не могу передать параметр в вычисляемый

...