Vue迭代元素内

Question

我试图从Vue组件迭代数组而不是重复我称之为'v-for'的元素。我还没有在official docs API中找到'v-for'的替代品，也没有在articles在线中找到替代品。

我有这样的：

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

希望得到以下

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

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

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

，并尝试这个，这不起作用：

<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

这是否对你的工作http://jsbin.com/kapipezalu/edit?html,js,console,output

你可能忘了定义道具到foo中的组成部分。

<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'} 
    ] 
    } 

}) 

专业提示：使用浏览器控制台 - 它会告诉你一些很酷的警告和错误。