Same v-for loop in two different <div>

Question

I want to put the same v-for loop in two different <div>. Is there a way to use a v-for loop only once?

Here is an example:

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

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

Answer 1

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>