如何使用axios在vuejs中渲染easydatatable

Question

我使用 axios 获取这些数据

{
  "qtp1459016715-18382027": {
    "name": "qtp1459016715-18382027",
    "status": "5",
    "priority": 5,
    "thread-id": 18382027,
    "group": "main",
    "daemon": false,
    "stacktrace": ["org.apache.solr"],
    "request": {
      "webapp": "/solr",
      "path": "/select",
      "params": "{df=_text_&dis.....}"
    },
    "heap-size-retained": 41996040
  },
}

这是app.vue文件，我想在其中显示表格

  <EasyDataTable :headers="headers" :items="items">
    <template #expand="items">
      <div style="padding: 15px">
        <h3>{{ items.name }}</h3>
      </div>
    </template>
  </EasyDataTable>

  data() {
    return {
      headers: [],
      items: [],
    };
  },
  async created() {
    this.headers = [
      { text: "THREAD NAME", value: "name"},
      { text: "THREAD STATUS", value: "status"},
      { text: "REQUEST PARAMS", value: "params"},
      { text: "HEAP SIZE RETAINED", value: "heap-size-retained"},
    ];
    this.items = await axios.get(`http://localhost:3000/threads`);
}

Answer 1

你应该在你的 axios 中添加 .then() :

await axios.get(`${apiBaseUrl}/getUser`, {
          headers: {
            Authorization: `Bearer ${access_token}`,
          },
        }).then((res) => {
          // items.push(res.data);
          items.value = res.data;
        }).catch((error) => {
          console.error(error);
        });