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>