VueJS 嵌套列表渲染与道具

Question

VueJS 嵌套列表渲染与道具

我想用 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>

Run Code Online (Sandbox Code Playgroud)

还有我的 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'}
          ]
        }
      ]
    }
  }
})

Run Code Online (Sandbox Code Playgroud)

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

我在这里有一个工作小提琴： 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.

Run Code Online (Sandbox Code Playgroud)

我错过了什么？

Answer 1

Bel*_*dak 5

打错字了，你说组件中的 props 是 props

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

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/uofmd96q/

归档时间：	8 年，11 月前
查看次数：	5686 次
最近记录：	4 年，4 月前