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

Question

我是一个初学者，我尝试使用 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>

这是我得到的输出

这就是我想要的

Answer 1

我重构了您的代码，首先，当您从 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>