vue.js - 访问兄弟中 v-for 循环的索引？ (VueJS)

Question

我正在尝试生成以下内容(呈现 div 元素，每四个元素后由一个 clearfix 分解):

<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="col-md-3 form-group"></div>
<div class="clearfix></div>
....

想知道在 VueJS 中是否可以使用下面的代码，或者有人可以帮我解决一个替代方案吗？

<div v-for="(sku, n) in sku_pattern" :key="n"  class="col-md-3 form-group"></div>
<div v-if="!((n+1)%4)" class="clearfix"> <!-- I know this won't work outside the scope of the previous element. -->

Answer 1

您可以使用 <template>用 v-for 标记来渲染一个包含多个元素的 block :

<template v-for="(sku, n) in sku_pattern">
    <div class="col-md-3 form-group">
    </div>
    <div v-if="!((n+1)%4)" class="clearfix">
</template>

Reference document