从数组返回数据失败

Question

我有一个问题，我无法看到我已经将数据推送到数组中的数据。然后从 axios

这是示例代码来自 vue.js

的 Axios

export default {
  name: 'facts',
  data(){
    const test = [{id: 'test',name: 'test'}]
    const response = [];
    const factsData = () => {
      axios.get('http://localhost:3000').then(x=>response.push(x.data))
    }
    factsData();
    console.log(response)
    return{
      test,
      response
    };
  }
};

当我尝试 console.log promise(.then) 中的输出数据时，它运行良好并显示我期望的数据，如下所示

这就是当我尝试将数据从 axios 推送到响应并使用上面的当前代码 console.log 显示输出数据时发生的情况

当我尝试访问它时 (console.log(response[0])，它在 console.log.

中显示未定义

但奇怪的是，当我回到我以前的代码而不是尝试访问数据并且我在控制台浏览器中展开数组时，它显示了我预期的数据，这意味着我无法访问它。

主要目的是我想使用 v-for

显示要在 table 中呈现的数据

<template>
  <div class="about">
    <center>
      <table>
        <thead>
          <tr>
            <th></th>
            <th>ID</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user,index) in test" :key="user.id">
            <td>{{index + 1}}</td>
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
          </tr>
        </tbody>
      </table>
    </center>
  </div>
</template>

请告诉我我缺少什么。谢谢。

P.S : 我是这个 vue js 的新手

Answer 1

您的代码结构不正确。使用此代码：

export default {
  name: 'ProfilePage',

  data() {
    return {
      response: []
    }
  },

  created () {
    this.getData();
  },

  methods: {
    getData() {
      axios.get('http://localhost:3000').then(x => this.response = x.data);
    }
  }
}

从数组返回数据失败

Failed returning data from array

asynchronous

promise

async-await

vue.js

axios