title: How to use `v-if` and `v-for` on the same element?
body: <p>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.</p>
  <p>so the classes of each article would be:</p>
  <pre><code>&lt;article class=&quot;post-item post-guide 12 22 19 30 55&quot;&gt;...
  </code></pre>
  <p>this is the HTML that renders all:</p>
  <pre><code>&lt;article  v-if=&quot;showIfHasClass&quot; :class=&quot;'post-item post-guide ' + guide.categories.toString().replace(/,/g, ' ')&quot; 
  v-for=&quot;(guide, index) in guides&quot; :key=&quot;index&quot;&gt;
  &lt;header&gt;
  &lt;h1 class=&quot;post-title&quot;&gt;
  {{ guide.title.rendered}}
  &lt;/h1&gt;
  &lt;/header&gt;
  &lt;/article&gt;
  </code></pre>
  <p>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.</p>
  <p>Should <em>showIfHasClass</em> be a computed property? I have tried with that too... but it seems, I'm missing something along the way.</p>
  <p>my data I have to check against is an array:</p>
  <pre><code>data:{
  guides: [...]
  selectedCategories: [1, 22, 33, 100, 30];
  }
  </code></pre>
  <p>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 <em>effective</em>?</p>