两个不同<div>中相同的v-for循环

Question

我想将相同的v-for循环放在两个不同的<div>中。是否有一种只使用一次v-for循环的方法？

下面是一个示例：

<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

您只需将v-for移动到一个容器div，并在那里多次使用它。在下面的示例中，您将创建具有对同一项的访问权限的2个div。

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

Answer 2

我不知道你到底想实现什么，但如果你想在同一个循环中打印两个div，你可以这样做：

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

Answer 3

您需要创建一个组件并调用它两次：

vFor.vue

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

然后：

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

或

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