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

Question

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

我试过使用 :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>

Answer 2

一种简单的方法是在字段定义中使用格式化程序：

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

并且在模板中：

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

格式化程序将自动打印指定的键或值。

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

bootstrap-vue nested object in array to show in table

vue.js

bootstrap-vue