bootstrap-vue nested object in array to show in table

Question

I'm trying to print out the league table but the Team part is in nested object. How do I connect to that object, then make them in to table cells for team.name, team.crest? I have seen an answer here but still I can't seem to print out the nested team object inside the array.

I've tried to use the :fields prop, but it's not working. I'm stuck.

Data from console.log:

    [{
    draw: 1
    goalDifference: 23
    goalsAgainst: 14
    goalsFor: 37
    lost: 0
    playedGames: 15
    points: 43
    position: 1
    team: { "id": 64, "name": "Liverpool FC", "crestUrl": "http://upload.wikimedia.org/wikipedia/de/0/0a/FC_Liverpool.svg" }   
  }]

<template>
  <b-container>
    <b-table striped hover :fields="fields" :items="info">
      <template v-slot:cell(name)="data">{{ data.value.team.name }}</template>
    </b-table>
  </b-container>
</template>

data() {
    return {
    fields: [
      { key: 'info.team.name', label: 'Team Name' },
    ],
      info: [],
}

Troy Morehouse · Accepted Answer · 2019-12-07 18:15:33Z

5

Try this:

<template>
  <b-container>
    <b-table striped hover :fields="fields" :items="info">
      <!-- the cell(...) value needs to match your field's key -->
      <template v-slot:cell(team.name)="data">{{ data.value }}</template>
    </b-table>
  </b-container>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { key: 'position', label: 'Position' },
        { key: 'team.name', label: 'Team Name' },
      ],
      info: [],
    }
  }
}
</script>

edited Dec 7, 2019 at 18:15

answered Dec 7, 2019 at 2:47

Troy Morehouse

5,4351 gold badge30 silver badges40 bronze badges

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

1 Comment

artworkjpm Over a year ago

It's printing out the positions now but not the team name. Using fields means I have to add each field to the <template> now?....OKAY I got it, I just removed info for the team. To be key: team.name. Thank you sir!

Jonathan Arias · Accepted Answer · 2021-03-19 20:01:50Z

0

An easy way to do it is by using a formatter in fields definition:

data() {
    return {
       fields: [
          {
            key: "avg_score",
            label: this.$t("avgScore"),
            sortable: true,
            sortByFormatted: true,
            formatter: (value, key, item) => item.stats.avg_score?.text 
          },
       ],
       items: [...your item list]
    }
}

And in the template:

<b-table :items="items" :fields="fields"></b-table>

The formatter will print the specified key or value automatically.

answered Mar 19, 2021 at 20:01

Jonathan Arias

6109 silver badges20 bronze badges

Collectives™ on Stack Overflow

bootstrap-vue nested object in array to show in table

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related