[Vuejs]-Vue js component with nested data

by

2👍

✅

You either need to add the detail component to the entry template, or you need to add a slot to the entry component.

Here is your code modified to use a slot.

console.clear()
var data2 = {
  "team": [{
      "id": 0,
      "author": "Johnnie Walker",
      "title": "Aging Your Own Whisky",
      "content": "A bunch of steps and a whole lot of content",
      "members": [{
          "id": "0",
          "name": "name 1",
          "text": "bio"
        },
        {
          "id": "1",
          "name": "name 2",
          "text": "bio"
        }
      ]
    },
    {
      "id": 1,
      "author": "Captain Morgan",
      "title": "Rum stories",
      "content": "A bunch of steps and a whole lot of contentttt",
      "members": [{
        "id": "3",
        "name": "name 3",
        "text": "bio"
      }]
    }
  ]
}
Vue.component('entry', {
  props: ['cat'],
  template: '<div>{{cat.author}}<slot/></div>'
})

Vue.component('detail', {
  props: ['ember'],
  template: '<div>{{ember.id}}</div>',
})

var vm2 = new Vue({
  el: '#app2',
  data: function() {
    console.log(data2.team)
    return data2;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app2">
  <entry v-for="t in team" v-bind:cat="t" v-bind:key="t.id">
    <detail v-for="mem in t.members" v-bind:ember="mem" v-bind:key="mem.id">
    </detail>
  </entry>
</div>

And here it is modifying the entry component to include the detail.

console.clear()
var data2 = {
  "team": [{
      "id": 0,
      "author": "Johnnie Walker",
      "title": "Aging Your Own Whisky",
      "content": "A bunch of steps and a whole lot of content",
      "members": [{
          "id": "0",
          "name": "name 1",
          "text": "bio"
        },
        {
          "id": "1",
          "name": "name 2",
          "text": "bio"
        }
      ]
    },
    {
      "id": 1,
      "author": "Captain Morgan",
      "title": "Rum stories",
      "content": "A bunch of steps and a whole lot of contentttt",
      "members": [{
        "id": "3",
        "name": "name 3",
        "text": "bio"
      }]
    }
  ]
}


Vue.component('detail', {
  props: ['ember'],
  template: '<div>{{ember.id}}</div>',
})

Vue.component('entry', {
  props: ['cat'],
  template: `<div>
    {{cat.author}}
    <detail v-for="mem in cat.members" v-bind:ember="mem" v-bind:key="mem.id">
    </detail>
    </div>`
})


var vm2 = new Vue({
  el: '#app2',
  data: function() {
    return data2;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app2">
  <entry v-for="t in team" v-bind:cat="t" v-bind:key="t.id"></entry>
</div>
👤Bert

Leave a comment