VueJS 嵌套列表渲染与道具

Question

我想用 Vue.js 呈现嵌套列表，但我的代码在嵌套组件部分失败。我的主模板：

<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
        <ul>
          <todo-item v-for="subtodo in todo.subTodos" v-bind:subtodo="subtodo"></todo-item>
        </ul>
      </li>
    </ul>
  </div>
</body>

还有我的js文件：

Vue.component('todo-item', {
  template: '<li>{{subtodo.text}}</li>',
  prop: ['subtodo']
})

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      todos : [
        { 
          text : 'Learn JavaScript', 
          subTodos : [
            { text : 'Linting'}, 
            { text : 'Bundling'}, 
            { text : 'Testing'}
          ]
        },
        { 
          text : 'Learn Vue', 
          subTodos : [
            { text : 'Components'}, 
            { text : 'Virtual DOM'}, 
            { text : 'Templating'}
          ]
        },
        { 
          text : 'Build something awesome', 
          subTodos : [
            { text : 'Build'}, 
            { text : 'Something'}, 
            { text : 'Awesome'}
          ]
        }
      ]
    }
  }
})

基本上在第一层我用 v-for 渲染一个数组，然后我将一个实例传递给子组件进行另一次迭代，我也 v-bind 当前实例以便我可以使用它在 child 的模板中。

我这里有一个工作 fiddle：https://jsfiddle.net/ny7a5a3y/4/

控制台给我这个错误：

[Vue warn]: Property or method "subtodo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

我错过了什么？

Answer 1

试试这个：

<todo-item v-for="st of todo.subTodos" :subtodo="st"></todo-item>

Answer 2

打错了，你说的prop in component 正确的是props

Vue.component('todo-item', {
  template: '<li>{{subtodo.text}}</li>',
  props: ['subtodo']
})

https://jsfiddle.net/uofmd96q/

Answer 3

如果有人需要在点击时呈现嵌套列表，供将来参考，这是我使用项目索引制作的一个非常简单的嵌套列表示例。

<div v-for="(aggList, index) in aggregationList">
        <div v-on:click="LoadAggIndex(index)">
            {{aggList.name}} and index: {{index}}
        </div>

    </div>

<div v-for="agg in loadedAggList">
        {{agg.key}}
        {{agg.count}}
    </div>

Vue.js

 methods: {
        LoadAggIndex: function (index) {
            SearchBar.loadedAggList = SearchBar.aggregationList[index].aggregates;
        }
    }

VueJS 嵌套列表渲染与道具

VueJS nested list rendering with props

vue.js

vue-component

vuejs2