I am trying to fetch API information and populate a data table, but my code is throwing an error. The error messages can be seen below in the console.
The property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Could someone please provide me with some advice?
Additionally, English is not my strong suit, so I would appreciate it if someone could help me correct any mistakes in my question.
<template>
<v-app>
<v-data-table dense :headers="headers" :item="items" class="elevation-1"></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: object[] = [];
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.itmes = response.data.map((comment:any) => ({
postId: comment.postId,
email: comment.email,
name: comment.name
}));
}
}
</script>