[bootstrap-vue在表中显示的数组中的嵌套对象

Question

我正在尝试打印出联赛表，但Team部分在嵌套对象中。如何连接到该对象，然后将它们放入team.name，team.crest的表格单元中？我已经看到了答案here，但仍然似乎无法打印出数组内的嵌套团队对象。

我尝试使用：fields道具，但是不起作用。我被卡住了。

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

Answer 1

尝试一下：

<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>