VueJs - v-for 结果的条件语句/过滤器

Question

所以现在我这样做是为了按类别组织我的结果，但如果觉得这样可能会更好：

<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>
..

If found this article doing this with a computed 属性我觉得这应该是方法，但无法让它工作（也因为我需要一个论据来证明它我认为这样工作？）：

  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>

但是，是的，它说我不能像这样在 for 循环中传递参数，所以这就是我现在结束的地方。

有人知道如何做到这一点吗？

藏品看起来像这样：

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

Answer 1

虽然在模板中使用方法可能会解决此问题，但这不是一个好的模式，因为每次出于任何原因重新呈现模板时，它都会导致方法运行。再加一层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']
   }
}

Answer 2

您可以通过从计算中返回一个方法来实现此目的，但我不推荐此解决方案。我建议您使用一种方法，而不是计算。

[推荐]

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);
    }
  }

在这里您可以阅读更多相关信息：

VueJs - v-for 结果的条件语句/过滤器

VueJs - Conditional statement / filter on v-for results

javascript

conditional-statements

vue.js

computed-properties

v-for