when trying to have two alternating loops after each other on the same level. If I wrap it in a parent element and loop thru it brakes the styles.
Here is an example of what when trying to do:
<div v-for=”category in items” class=”cat-name”>{ category.name }</div>
<div v-for=”category in items” class=”cat-meta”>{ category.metaData }</div>
Wanted Result:
<div class=”cat-name”>name1</div>
<div class=”cat-meta”>metadata1</div>
<div class=”cat-name”>name2</div>
<div class=”cat-meta”>metadata2</div>
<div class=”cat-name”>name3</div>
<div class=”cat-meta”>metadata3</div>
and so on…
I really hope that this is possible since it completely breaks the styles when I tried:
<div v-for=”category in items”>
<div class=”cat-name”>{ category.name }</div>
<div class=”cat-meta”>{ category.metaData }</div>
</div>
Really appreciate any help and input.
Thanks, -J
Solution :
You could wrap both the elements in a template tag.
Unlike a basic tag, this one will not be rendered in the DOM.
<template v-for=”category in items”>
<div class=”cat-name”>{ category.name }</div>
<div class=”cat-meta”>{ category.metaData }</div>
</template>