[Vuejs]-Same v-for loop in two different <div>

by

0👍

✅

You can just move the v-for to a container div and use it multiple times there. In the below example you will create 2 divs with access to the same item.

<div v-for="(item, index) in items" :key="index"
     class="parent-v-for">

  <div class="v-for-1">
    {{item}}
  </div>

  <div class="v-for-2">
    {{item}}
  </div>

</div>
👤Scornwell

1👍

I am not sure what exactly you want to achieve but you can do something like this if you want to print two divs in same loop:

    <div class="v-for-1">
      <div v-for="(item, index) in items" :key="index">
        <div> blah blah </div>
        <div> blah blah </div>
      </div>
    </div>
👤N. Djokic

0👍

You need to create a component and call it twice:

vFor.vue

<div :class="YOUR_CLASS_FROM_PROPS">
 <div v-for="(item, index) in ITEMS_FROM_PROPS" :key="index">
   blah blah
 </div>
</div>

and then:

<vFor :items="ITEMS" :className="vfor-1" />
<vFor :items="ITEMS" :className="vfor-2" />

OR

<div v-for="(_, i) in [0, 1]" :key="index" :class="v-for`${i}`">
 <div v-for="(item, index) in items" :key="index">
   blah blah
 </div>
</div>
👤Mossen

Leave a comment