I desperately need assistance. I have been struggling with this issue for a while now, but all my attempts have ended in failure. My objective is to retrieve API data that corresponds to an array containing name, id, and email, and then display this information in a data-table. Could someone please provide some guidance? Understanding this is crucial for the success of my new project. Please, lend me your expertise!
[error message displayed in development tab]
It is recommended to use string/number values as keys instead of non-primitive values.
<template>
<v-app>
<v-data-table dense :headers="headers" :item="items" class="elevation-1">
<tbody>
<tr v-for="item in items" :key="items">
<td>{{item.postId}}</td>
<td>{{item.email}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</v-data-table>
</v-app>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import axios from "axios";
@Component
export default class AxiosPractice extends Vue {
items: any[] = [];
headers = [
{ text: "id", value: "postId" },
{ text: "name", value: "name" },
{ text: "email", value: "email" }
];
async mounted() {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/posts/1/comments"
);
this.items = response.data.map((comment:any) => ({
postId: comment.postId,
email: comment.email,
name: comment.name
}));
}
}
</script>