VueJS nested list rendering with props

Question

I want to render a nested list with Vue.js, but my code fails at nested component part. My main template:

<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>

And my js file:

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

Basically at the first level I render an array with v-for, then I pass an instance to the subcomponent for another iteration, and I also v-bind the current instance so that I can use it in the child's template.

I have a working fiddle here: https://jsfiddle.net/ny7a5a3y/4/

The console gives me this error:

[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.

What am I missing?

It's typo props is correct not prop

Belmin Bedak
– Belmin Bedak

2016-12-12 22:39:23 +00:00
Commented Dec 12, 2016 at 22:39 — Belmin Bedak
– Belmin Bedak, Commented Dec 12, 2016 at 22:39

Belmin Bedak · Accepted Answer · 2016-12-12 22:41:14Z

5

It's typo, you said prop in component correct is props

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

https://jsfiddle.net/uofmd96q/

answered Dec 12, 2016 at 22:41

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kamil Kiełczewski · Accepted Answer · 2016-12-12 22:40:37Z

1

try this:

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

answered Dec 12, 2016 at 22:40

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

Jack · Accepted Answer · 2021-07-22 09:14:52Z

0

For future reference if anybody needs to render nested list on click, this is a very simple nested list example I made using the index of the items.

<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;
        }
    }

answered Jul 22, 2021 at 9:14

Jack

593 bronze badges

Collectives™ on Stack Overflow

VueJS nested list rendering with props

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related