Vue.js循环不起作用

Question

为什么不应该使用10次代码来构建一个10等于div的模型呢？

https://jsfiddle.net/chrisvfritz/50wL7mdz/

<script src="https://unpkg.com/vue"></script>
    <div v-for="n in 10" id="example">
        <my-list-item></my-list-item>
    </div>

来自控制台的

错误：V-for on有状态组件根元素，因为它呈现多个元素。

如何修复它以获得10个不同的div？

Answer 1

您可以尝试这种方法：

new Vue({
    ...
    data: {
        ...
        desiredItemCount: new Array(10)
    },
    ...
});

然后在你的模板中使用它：

<div v-for="n in desiredItemCount" id="example">
    <my-list-item></my-list-item>
</div>

小提琴：https://jsfiddle.net/50wL7mdz/69934/

Answer 2

您附加的vue实例应该只有一个根节点。由于您在带有id示例的div上使用v-for，因此创建了10个没有根父节点的div。

所以创建一个这样的包装器根节点：

<script src="https://unpkg.com/vue"></script>
<div id=|example">
    <div v-for="n in 10">
        my-list-item></my-list-item>
    </div>
</div>