Vue.jsサイクルが機能しない

Question

コードを次のように繰り返して10回繰り返すべきではありません。コンソールから

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個の異なる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のインスタンスを1つのルートノード。 div with idの例で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>