CODEWITHSUNDEEP
loopsvue.jsconditional-statementswrapperv-for
uneasy
uneasy

Reputation: 629

VueJs conditional wrapper inside v-for

Is there any way to make conditional wrapper in v-for loop ?

So I have something like this

<template>
  <div v-for="(item in items)">
     <span v-if="item.date==newDate">Header</span>
     <div>{{item.text}}</div>
  </div>
</template>

But what I need is something like: Not sure I can describe it in the code. but I need items to be in wrapper whenever there is new so like

<section>
  <span> New v-if Span</span>
  <div> item 1</div>
  <div> item 2</div>
  <div> item 3</div>
</section>
<section>
  <span> New v-if Span</span>
  <div> item 4</div>
  <div> item 5</div>
  <div> item 6</div>
</section>

I guess I could refine my array, and check for groups before I have v-for, and do v-for in v-for But maybe there is cooler way to do it in vue that I am not aware of ?

Upvotes: 1

Views: 740

Answers (1)

s4k1b
s4k1b

Reputation: 3095

You can try something like this here,

new Vue({
  el: "#app",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <section v-for="jump in Math.ceil(items.length/3)">
    <span>New v-if Span</span>
    <div v-for="item in items.slice(3*(jump-1), 3*(jump-1)+3)">item {{item}}</div>
  </section>
</div>

Upvotes: 2

Related Questions