Vue js component with nested data

Question

This is driving me crazy, I have nested data in an array and have not been successful in getting it to render using components, I am able to render it without a component though.

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"
            }
            ]               
        }               
    ]}

What I am trying to do is loop through members, here is my current code

index.html

<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 is my js file

    Vue.component('entry', {
        props:['cat'],
        template: '<div>{{cat.author}}</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;
        }           
    });

The data in entry renders but nothing happens with detail, no warnings either, how do I proceed?

Note: When I approach it this way it DOES work, but this is not using a component:

    var vm = new Vue({
        el: '#app',
        data: function() {
            console.log(data2.team)
            return data2;
        }           
    });

and the html

<div id="app">
    <div v-for="t in team" v-bind:key="t.id" v-bind:author="t.author">
    {{t.author}}
        <div v-for="m in t.members" v-bind:key="m.id">
            {{m.name}}
        </div>   
    </div>  
</div>

Looks like your entry component just needs a <slot>

Phil
– Phil

2018-02-16 00:06:24 +00:00
Commented Feb 16, 2018 at 0:06 — Phil
– Phil, Commented Feb 16, 2018 at 0:06

Bert · Accepted Answer · 2018-02-16 00:06:33Z

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>

Collectives™ on Stack Overflow

Vue js component with nested data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related