Vue.js Vuetify数据表呈现嵌套数据

我有以下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行，每个“entradas”对应一行

我使用以下基本方法通过axios加载json：

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

及

问题是，当我使用

：items=“dataItems.entradas”

时，它不会呈现任何内容。如果我只使用

：items=“dataItems”

并在标题处使用类似

的值：“entradas.title”

我尝试了一些使用.map函数的变通方法，就像我看到的一些类似的例子一样，但我没有想到在这种情况下这会有什么帮助…

试试这个

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

。。。
数据（）{
返回{
标题：[
{
文本：“数据”，
对齐：“开始”，
可排序：false，
值：“日期”，
},
{text:'Title'，value:'Title'，sortable:false}，
{text:'Amount'，value:'Amount'，sortable:false}，
],
数据项：[]，
}
},
方法：{
加载数据（）{
axios
.get（'dataapi'））
。然后（响应=>{
this.dataItems=response.data.map（dataItem=>{
const{amount，date，entradas}=dataItem
entradas.map（entrada=>{
返回{
数量
日期，
…诱捕
}
})
})
})
},
}
...

您应该只需要一个简单的

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>

方法：{
加载数据（）{
get（'dataapi'））
。然后（（响应）=>{
this.dataItems=response.data.reduce（函数（acc，v）{
返回[…acc，…v.entradas]
},[])
})
},
}

---

dataItems生成了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>

  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>