Vue Iteration inside element

Question

I am attempting to iterate through an array from a Vue component without reapeating the element on which I call 'v-for'. I have not found a subsitute for 'v-for' in the official docs API, nor in articles online.

I have this:

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

Want this:

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

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

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

And have tried this, which does not work:

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

Help is much appreciated! Started coding with Vue.js yesterday.

Answer 1

Your HTML is wrong. You can do this just fine.

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

Answer 2

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

Answer 3

Does this work for you http://jsbin.com/kapipezalu/edit?html,js,console,output

You probably forgot to define props into foo component.

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

})

Pro Tip: Use Browser Console - It will show you some cool warnings and errors.