CODEWITHSUNDEEP
vue.js
Sparky1
Sparky1

Reputation: 3525

Vue JS Nested Lists: Pass Props to Child, and to Child of Child

I'm trying to create nested lists 3 levels deep with Vue.js 2.x. I'm passing props from the outer list to the middle list and from there to the inner list.

However, only the outer list renders. No errors are thrown. The inner lists seem not to receive any data.

Fiddle of my code Js fiddle

Markup

 <div id="app">
  <ul>
    <outer-item v-for="item in items" v-bind:item="item">
      <ul>
        <mid-item v-for="mid in item.mids" v-bind:mid="mid">
          <ul>
            <inside-item v-for="inside in mid.insides" 
               v-bind:inside="inside"></inside-item>
          </ul>
        </mid-item>
      </ul>
    </outer-item>
  </ul>
</div>

JavaScript

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

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      items: [{
          text: 'Outer A',
          mids: [{
            text: 'Mid A',
            insides: [{
              text: 'Inside A'
            }, {
              text: 'Inside B'
            }]
          }, {
            text: 'Mid B',
            insides: [{
              text: 'Inside C'
            }, {
              text: 'Inside D'
            }]
          }]
        },
      ]
    }
  }
})

Upvotes: 0

Views: 855

Answers (1)

sandrooco
sandrooco

Reputation: 8756

The problem is quite simple: You have components which all have lis as templates. Now you're trying to bind other components into these lis - that doesn't make sense I think. :)

The fix: Change the templates to use Vue's <slot></slot> and add the text output:

// Do this for all other components
Vue.component('outer-item', {
  props: ['item'],
  template: '<div><li>{{item.text}}</li><slot></slot></div>'
})

Upvotes: 2

Related Questions