如何在同一元素上使用“v-if”和“v-for”？

Question

您好，我正在尝试弄清楚如何在也使用 v-for 的迭代元素上使用 v-if 。我需要检查当前元素是否具有一系列类中的任何一个，这些类是数字。

所以每篇文章的类是：

<article class="post-item post-guide 12 22 19 30 55">...

这是呈现所有内容的 HTML：

<article  v-if="showIfHasClass" :class="'post-item post-guide ' + guide.categories.toString().replace(/,/g, ' ')" 
v-for="(guide, index) in guides" :key="index">
<header>
<h1 class="post-title">
{{ guide.title.rendered}}
</h1>
</header>
</article>

我尝试过检查所有元素的类的方法，这是可行的，但我尝试使用带有 v-if 的干净的 Vue 内置解决方案，但没有成功，我无法在成功的方式。

showIfHasClass应该是计算属性吗？我也尝试过……但似乎我一路上错过了一些东西。

我必须检查的数据是一个数组：

data:{
guides: [...]
selectedCategories: [1, 22, 33, 100, 30];
}

或者也许最好直接循环指南并检查它们是否具有 selectedCategory ，然后从指南数据数组中删除该元素？什么更有效？

Answer 1

除了创建额外过滤的选项（有效地消除了在同一元素上使用和 的computed需要）之外，您还可以使用模板级方法来处理此类边缘情况：标签。v-forv-if<template>

该<template>标签允许您使用任意模板逻辑，而无需实际渲染额外的元素。请记住，因为它不渲染任何元素，所以您必须将 s 放置key在v-for实际元素上，如下所示：

<template v-for="(guide, index) in guides">
  <article v-if="isGuideVisible(guide)"
           :key="index"
           class="post-item post-guide"
           :class="[guide.categories.toString().replace(/,/g, ' ')]">
    <header>
      <h1 v-text="guide.title.rendered" />
    </header>
  </article>
</template>

isGuideVisible应该是一个返回该项目是否被渲染的方法，因此您不必在标记中编写该逻辑。此方法的优点之一是，如果您想用后备内容替换缺失的项目，您v-if可以在元素后面添加后备元素。v-else请记住还有:key="index"后备元素。

除了上述用例之外，<template>当渲染附加包装元素不是一个选项（将导致无效的 HTML 标记）（即：table > tr > td关系或ol/ul > li关系）时，标签会派上用场。

它在这里被称为“隐形包装器”，但它在文档中没有专门的部分。

旁注：由于您还没有实际展示里面的内容guide.categories，所以我无法提供建议，但可能有比.toString().replace(). 如果guide.categories是一个字符串数组，您可以简单地执行：:class="guide.categories"。