如何在 nuxt.js 中获取 API 和映射数据表的数据答案

【问题标题】：How to get API and mapping the data for data-table in nuxt.js如何在 nuxt.js 中获取 API 和映射数据表的数据
【发布时间】：2020-11-07 18:53:48
【问题描述】：

我真的需要别人的帮助。我尝试了很多次关于这个问题，但每次尝试都失败了...... 在我的目标中，我想获取映射到数组的 API 数据，包括姓名、ID 和电子邮件。最后将该数据放入数据表中。请有人给我建议？我真的必须了解我的新项目。请帮帮我！

[开发选项卡中的错误消息]

避免使用非原始值作为键，而是使用字符串/数字值。

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

【问题讨论】：

标签： typescript vue.js vuejs2 vuetify.js nuxt.js

【解决方案1】：

您应该在 v-for 循环中使用原始值作为键，例如字符串或数字，不要像以前那样使用数组或对象，简单的解决方案是使用循环索引作为键：

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

但您误用了v-data-table 组件，您可以这样做：

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

如果您想自定义某些列，请查看此answer

【讨论】：