在 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() 需要一些时间来返回响应数据。如何才能等待响应数据然后返回呢？

原文由 Souvik Ghosh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Surya Neupane 发布，翻译遵循 CC BY-SA 4.0 许可协议