Таблицы Vuetify Data отображают вложенные данные

Question

У меня есть следующие JSON данные:

[
  {
    "amount": 75,
    "date": "2020-04-22",
    "entradas": [
      {
        "date": "2020-04-22",
        "amount": "100.00",
        "title": "test 1"
      },
      {
        "date": "2020-04-22",
        "amount": "-25.00",
        "title": "test 2"
      }
    ]
  },
  {
    "amount": 10,
    "date": "2020-04-30",
    "entradas": [
      {
        "date": "2020-04-30",
        "amount": "10.00",
        "title": "test 3"
      }
    ]
  }
]

Чего я хотел бы добиться, так это рендерить все эти записи "entradas" вместе, поэтому в этом случае он должен рендерить 3 строки в таблице данных по одному на каждую "энтраду".

У меня есть следующий метод basi c для загрузки json по топору ios:

    methods: {
        loadData () {
            axios.get('dataapi')
                    .then(response => this.dataItems = response.data)
        },
    }

и

    data () {
        return {
            headers: [
                {
                    text: 'Data',
                    align: 'start',
                    sortable: false,
                    value: 'date',
                },
                { text: 'Title', value: 'title', sortable: false },
                { text: 'Amount', value: 'amount', sortable: false },
            ],
            dataItems: []
        }
    },

<template>
    <v-app id="testdatatable">
        <v-data-table
        :headers="headers"
        :items="dataItems.entradas"
        class="elevation-1"
        ></v-data-table>
    </v-app>
</template>

Проблема в том, что когда я использую :items="dataItems.entradas", он просто ничего не рендерит. Те же проблемы возникают, если я использую только :items="dataItems", а в заголовках используется что-то вроде value: 'entradas.title'

Я попробовал обходной путь с функцией .map, как мне показалось, некоторые похожие примеры, но я не сделал Не могу понять, как это может помочь в этой ситуации ...

Answer 1

Вам нужно только простое reduce, чтобы сгладить вложенные массивы элементов.

  methods: {
        loadData () {
            axios.get('dataapi')
                  .then((response) => {
                      this.dataItems = response.data.reduce(function(acc, v) {
                             return [...acc, ...v.entradas]
                      },[])
                  })
        },
    }

  <v-data-table
    :headers="headers"
    :items="dataItems"
    class="elevation-1"
  ></v-data-table>

Демонстрация (см. Вычисление flatItems ())

Answer 2

Попробуйте это

...
data () {
    return {
        headers: [
            {
                text: 'Data',
                align: 'start',
                sortable: false,
                value: 'date',
            },
            { text: 'Title', value: 'title', sortable: false },
            { text: 'Amount', value: 'amount', sortable: false },
        ],
        dataItems: [],
    }
},
methods: {
    loadData () {
        axios
            .get('dataapi')
            .then(response => {
                this.dataItems = response.data.map(dataItem => {
                    const { amount, date, entradas } = dataItem

                    entradas.map(entrada => {
                        return {
                            amount, 
                            date,
                            ...entrada
                        }
                    })
                })
            })
    },
}
...
<template>
    <v-app id="testdatatable">
        <v-data-table
            :headers="headers"
            :items="dataItems"
            class="elevation-1"
        ></v-data-table>
    </v-app>
</template>