How to use `v-if` and `v-for` on the same element?

user_3181962 0
Viewed 5922

Hi I'm trying to figure out how to use v-if on a iterated element which also uses v-for. I need to check if the current element has any of a series of classes, which are numbers.

so the classes of each article would be:

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

this is the HTML that renders all:

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

I have tried with methods that check the class of all elements, that works, but i'm trying to use a clean Vue built-in solution with v-if without success, i'm not able to retrieve the class of this in a successful way.

Should showIfHasClass be a computed property? I have tried with that too... but it seems, I'm missing something along the way.

my data I have to check against is an array:

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

or maybe it is better to directly loop over the guides and check if they have the selectedCategory or not, then remove the element from the guides data array? What is more effective?

vue.js
2 Answers

Besides the option to create an additional filtered computed (effectively eliminating the need to use v-for and v-if on the same element), you also have a template level way of dealing with such edge-cases: the <template> tag.

The <template> tag allows you to use arbitrary template logic without actually rendering an extra element. Just remember that, because it doesn't render any element, you have to place the keys from the v-for on the actual elements, like this:

<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 should be a method returning whether the item is rendered, so you don't have to write that logic inside your markup. One advantage of this method is that you can follow your v-if element with a fallback v-else element, should you want to replace the missing items with fallback content. Just remember to also :key="index" the fallback element as well.

Apart from the above use-case, <template> tags come in handy when rendering additional wrapper elements is not an option (would result in invalid HTML markup) (i.e: table > tr > td relations or ol/ul > li relations).

It's mentioned here as "invisible wrapper", but it doesn't have a dedicated section in the docs.

Side note: since you haven't actually shown what's inside guide.categories, I can't advise on it, but there's probably a cleaner way to deal with it than .toString().replace(). If guide.categories is an array of strings, you could simply go: :class="guide.categories".

user_18916770

I think the most Vue way is to create a computed property with filtered items from selected categories, then use that in v-for loop (the idea is to move the business logic away from template).

computed: {
  filteredItems(){
    return this.guides.filter(e => this.selectedCategories.includes(e.category))
  }
}

Also, as a note, it is not recommended to use v-if and v-for on the same element, as it may interfere with the rendering and ordering of loop elements. If you don't want to add another level of nesting, you can loop on a 'template' element.

<template v-for="item in items">
  // Note the key is defined on real element, and not on template
  <item-element v-if='condition' :key="item.key"></item-element>
</template>
user_46452910
Related