CODEWITHSUNDEEP
vue.jsbootstrap-vue
artworkjpm
artworkjpm

Reputation: 1337

bootstrap-vue nested object in array to show in table

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.

enter image description here

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: [],
}

Upvotes: 2

Views: 2155

Answers (2)

Jonathan Arias
Jonathan Arias

Reputation: 570

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.

Upvotes: 0

Troy Morehouse
Troy Morehouse

Reputation: 5435

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>

Upvotes: 5

Related Questions