要素内のVue反復

Question

Vueコンポーネントから配列を反復しようとしていますが、は、 'v-for'と呼ばれる要素を再設定しません。 official docs APIでもarticlesでも「v-for」の代理人は見つかりませんでした。

私はこのている：動作しない、

<foo :index="0"><foo/> 

<foo :index="1"><foo/> 

<foo :index="2"><foo/> 
//etc... 

そして、これを試してみました：

<div v-for="(item, index) in items"> 
    <foo :index="index"> 
    <foo/> 
</div> 

これをしたい

<foo v-for="(item, index) in items":index="index"> 
<foo/> 

ヘルプははるかに高く評価されます！昨日Vue.jsでコーディングを開始しました。

Answer 1

HTMLが間違っています。あなたはこれをうまくやることができます。

<foo v-for="(item, index) in items" :index="index"></foo> 

Answer 2

<foo v-for="(item, index) in items"> 
    {{index}} 
</foo> 

Answer 3

おそらく、fooのコンポーネントに小道具を定義するのを忘れて、あなたhttp://jsbin.com/kapipezalu/edit?html,js,console,output

のためにこの作業を行います。

<div id="app"> 
    <foo v-for="(item, index) in items" :index="index"></foo> 
    </div> 

    <template id="foo-temp"> 
    <div> 
     <span>{{ index }}</span> 
    </div> 
    </template> 

JS：

Vue.component('foo', { 
    props: ['index'], 
    template: '#foo-temp' 
}) 

new Vue({ 

    el: '#app', 

    data: { 
    items: [ 
     {id: 1, title: 'One'}, 
     {id: 2, title: 'Two'}, 
     {id: 3, title: 'Three'} 
    ] 
    } 

}) 

プロヒント：使用ブラウザコンソール - それはあなたにいくつかのクールな警告やエラーが表示されます。