两个不同 <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>

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

Same v-for loop in two different <div>

vue.js

v-for