元素内部的Vue迭代答案

【问题标题】：Vue Iteration inside element元素内部的Vue迭代
【发布时间】：2017-02-23 20:15:58
【问题描述】：

我正在尝试从 Vue 组件中迭代一个数组而不重复我调用“v-for”的元素。我在official docs API 和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 编码。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您的 HTML 是错误的。你可以做到这一点。

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

【讨论】：

【解决方案2】：

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

【讨论】：

我已经编辑了这个问题。我需要能够在 foo 属性中使用索引。

【解决方案3】：

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

你可能忘记在 foo 组件中定义 props。

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

})

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

【讨论】：