访问兄弟中的 v-for 循环的索引？ (VueJS)答案

【问题标题】：Accessing index of a v-for loop in a sibling? (VueJS)访问兄弟中的 v-for 循环的索引？ (VueJS)
【发布时间】：2018-12-23 16:58:07
【问题描述】：

我正在尝试生成以下内容（呈现 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. -->

【问题讨论】：

标签： vue.js vuejs2 bootstrap-4

【解决方案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

【讨论】：

这是完美的，不过，我遇到了一个小的编译时错误，指出模板无法键入。 - <template> cannot be keyed. Place the key on real elements instead.。取下钥匙，就像一个魅力。谢谢！

【解决方案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>

【讨论】：

子元素上的键应该做什么？循环中的一个关键是识别循环中渲染的项目，以实现排序一致性。恕我直言，这对子元素无关紧要。