创建多个组件答案

【问题标题】：Create a number of components创建多个组件
【发布时间】：2020-06-14 19:10:47
【问题描述】：

我想知道是否可以通过视觉来调用一个组件一定次数？

基本上我有一个初始化为 5 的大小变量，我希望它是小部件组件的 5 倍。

这是我当前的代码：

模板：

<template>
    <div v-for="item in size" :key="item">
        <Widget/>
    </div>
</template>

脚本：

import Widget from './Widget'
export default {
    data () {
        return {
            size: 5
        }
    },
    components: {
        Widget
    }
}

我看过v-for，但我不明白它是如何工作的。

【问题讨论】：

再读一遍文档，v-for 里面都有解释。
@Dan 我的代码出现此错误：无法在有状态组件根元素上使用 v-for，因为它呈现多个元素。
如果您将 v-for div 包装在另一个应该消失的 div 中
或者你也可以<template><div><Widget v-for... /></div></template>
@Dan Ahah 这就是问题所在！非常感谢您的帮助！！！

标签： javascript vue.js vuejs2 vue-component v-for

【解决方案1】：

如果你想要固定数量的小部件，你可以这样做

<Widget v-for="number in 5" :key="number" />

请记住，组件的根模板元素不接受 v-for。

【讨论】：

【解决方案2】：

一个组件只能有一个根元素，所以最外层元素上的v-for 会抛出一个错误，因为它会创建多个根元素。这些都应该为你解决它：

<template>
    <div>
        <div v-for="item in size" :key="item">
            <Widget/>
        </div>
    </div>
</template>

或

<template>
    <div>
        <Widget v-for="item in size" :key="item" />
    </div>
</template>

【讨论】：