CODEWITHSUNDEEP
vue.jsv-for
MissJulie
MissJulie

Reputation: 323

Alternating v-for DOM elements on same level

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

Upvotes: 0

Views: 120

Answers (1)

Quentin
Quentin

Reputation: 3289

You could wrap both your 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>

Upvotes: 2

Related Questions