Vue 迭代内部元素

Question

我正在尝试从 Vue 组件 遍历一个数组，而不 重复我调用 'v-for' 的元素。我没有在 official docs API, nor in articles 网上找到 'v-for' 的替代品。

我有这个：

<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

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

Answer 2

这个对你有用吗http://jsbin.com/kapipezalu/edit?html,js,console,output

您可能忘记将 props 定义到 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'}
    ]
  }

})

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

Answer 3

你的HTML错了。你可以做到这一点。

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

Vue 迭代内部元素

Vue Iteration inside element

javascript

vue.js

vue-component

vuejs2