在兄弟姐妹中访问v-for循环的索引？ （VueJS）

Question

我正在尝试产生以下内容-

<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一起使用，以呈现多个元素的块：

<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

Answer 2

只需添加@ittus答案，

遍历兄弟姐妹的解决方案是使用template标签。

虽然模板不能为keyed，但是您必须在孩子的元素上放置key，这样才能解决您的问题。

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