Vue.js Zyklus funktioniert nicht

Question

Warum sollte nicht folgenden Code iterieren 10 mal ein Modell von 10 gleichen Divs bauen?

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> 

Fehler von der Konsole: V-Element für auf zustandsbehaftete Komponente root da macht es mehrere Elemente.

Wie repariere ich es, um 10 verschiedene divs zu bekommen?

Answer 1

Sie diesen Ansatz versuchen:

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

Und es dann so in der Vorlage verwenden:

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

Fiddle: https://jsfiddle.net/50wL7mdz/69934/

Answer 2

die vue Instanz sollten Sie nur an haben ein Wurzelknoten. Da Sie v-for für das Beispiel div mit ID verwenden, werden 10 divs erstellt, die keinen Stammelternknoten haben.

So ein Wrapper-Root-Knoten wie folgt erstellen:

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