How to get API and mapping the data for data-table in nuxt.js

Question

I really need someones help. I tried many times about that issues but every trying are failed....... In my goal, I want to get API data that mapping to array include name, id and email. Finally that data are put the data-table. Please someone advise me? I really have to understand for my new project. Please help me!

[error message in develop tab]

Avoid using non-primitive value as key, use string/number value instead.

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

Answer 1

You should use a primitive value as a key in v-for loop such as string or number don't use array or object as you did, the simple solution is to use the loop index as a key :

 <tr v-for="(item,index) in items" :key="index">

but you're misusing the v-data-table component, you could just do :

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

if you want to customize some column please check this answer