VUE.JS API 数据通过使用 axios 在 V-data-table 中显示不起作用：它没有显示数据

如何解决VUE.JS API 数据通过使用 axios 在 V-data-table 中显示不起作用：它没有显示数据

我是初学者，我尝试使用 Vue.js 和 Vuetify 访问 API 并显示表格。 我从 API 获取数据，但无法通过 v-data-table 显示。

这是我的代码：

HTML 部分

    <v-data-table :items="data" :headers="headers" :items-per-page="5">
       <template slot="data" slot-scope="props">
        <td>{{ props.data.userId }}</td>
        <td>{{ props.data.id }}</td>
        <td>{{ props.data.title }}</td>
      </template>
    </v-data-table>

脚本部分

<script>
import axios from "axios";
export default {
  name: "Current",data: () => ({
    items: ["albums","todos","posts"],selected: "",headers: [
      { text: "USER_ID",align: "start",sortable: false,value: "userId" },{ text: "ID",value: "id" },{ text: "TITLE",value: "title" },],data:[],}),methods: {
    getData() {
      axios
        .get("https://jsonplaceholder.typicode.com/users/1/" + this.selected,{dataType: 'json'})
        .then((response) => { this.data = response.data;})
        .catch((err) => alert(err));
    },},mounted() {
    this.getData();
  }

};
</script>

Here is the output that I got

Here is what I want

解决方法

我重构了您的代码，首先，当您从 json 占位符获取数据时，响应中只有一个对象，您必须将该对象推送到 data: []，而不是分配。此外，您的 v-data-table 模板看起来很奇怪，标题中的值应该与响应数据中的键名相匹配。

<template>
  <v-app>
    <v-data-table :items="data" :headers="headers" :items-per-page="5">
      <template v-slot:items="props">
        <td>{{ props.item.id }}</td>
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.email }}</td>
      </template>
    </v-data-table>
  </v-app>
</template>

<script>
import axios from "axios";

export default {
  name: "App",data: () => ({
    items: ["albums","todos","posts"],selected: "",headers: [
      { text: "USER_ID",align: "start",sortable: false,value: "id" },{ text: "EMAIL",value: "email" },{ text: "NAME",value: "name" },],data: [],}),methods: {
    getData() {
      return axios
        .get("https://jsonplaceholder.typicode.com/users/1/" + this.selected,{
          dataType: "json",})
        .then((response) => {
          this.data.push(response.data)
        })
        .catch((err) => alert(err));
    },},mounted() {
    this.getData();
  },};
</script>