javascript - 在 Vue.js 中等待 Ajax 响应数据

Question

我有一个 Vue 组件，我正在尝试使用 axios 从 API 获取一些数据。

<template>
    <div>
        This is Default child component
        {{tools[0].name}}
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  methods: {
      fetchData() {
        const customJs = new CustomJS();
        return customJs.getTools();
      }
  },
  created() {
    this.tools = this.fetchData(); //preferably need to wait here wait for response
  }
}
</script>

getTools() 函数位于 Vue 组件文件之外的另一个 JS 文件中，该文件使用 axios.get 进行 API 调用。

getTools(id = 0){
    this.apiTool += (id > 0) ? id : '';
    axios.get(this.apiTool, {
    })
    .then(function (response) {
        console.log(response.data);
        return response.data;
    })
    .catch(function (error) {
        console.log(error);
    });
}

问题是，{{tools}} 是未定义的，因为 getTools() 需要一些时间来返回响应数据。如何等待响应数据然后返回？

Answer 1

尝试下面的代码:这样代码只会在实际加载时呈现

<div v-if="tools">
    This is Default child component
    {{tools[0].name}}
</div>