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-为状态组件根元素，因为它呈现多个元件。

我该如何修复它以获得10个不同的divs？

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为example的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>