vue.js - bootstrap-vue 数组中嵌套对象以显示在表中

Question

我正在尝试打印联赛表，但团队部分位于嵌套对象中。如何连接到该对象，然后将它们放入 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>