方法不适用于创建的钩子 Vue.js

Question

我正在尝试创建基于数据库的 Web 应用程序。设置：NodeJS 和使用 CLI（使用 Webpack）生成的 Vuejs 2 应用程序。目前，我正在使用 axios 将记录检索到对象中。基于该对象，我想从某些点到其他点绘制一些 svg 线。从@click（v-on 指令）运行该方法时，该方法完全按照设计工作。但是，当我尝试将它添加到创建的钩子时，它不起作用。没有显示错误。它只是没有运行。有没有人不知道为什么？下面的代码示例。

<template>
<div class="holder">
  <step v-for="item in steps"></step>
  <events v-for="point in points"></events>
  <button @click= "createArrows">Test</button>
</div>
</template>

<script>
import axios from 'axios'
import Step from './Step.vue'
import Events from './Events.vue'

export default {
name: 'Graph',
data () {
  return {
    steps: '',
    events: '',
    points: []
},

components: {
  Step, Events
},
methods: {
  getSteps: function() {
    let getsteps = this
    axios.get('localhost:8000/api/steps')
          .then(function (response) {
            getsteps.steps = response.data
          })
          .catch(function (error) {
            getsteps.steps = "Invalid request"
          })
  },
  getEvents: function() {
        let getevents = this
        axios.get('localhost:8000/api/events')
              .then(function (response) {
                getevents.events = response.data
              })
              .catch(function (error) {
                getevents.events = "Invalid request"
              })

    },
  createArrows: function() {
  },
created() {
  this.getSteps(),
  this.getEvents(),
  this.createArrows()
}


}

编辑：承诺已经包含在 axios 库中。由于我对这个概念不熟悉，所以我错过了这个。重构代码如下：

methods: {
getData: function() {
  let getdata = this
  axios.all([
          axios.get('localhost:8000/api/steps'),
          axios.get('localhost:8000/api/events')
        ])
        .then(axios.spread(function (stepResponse, eventResponse) {
          console.log('success')
          getdata.steps = stepResponse.data
          getdata.events = eventResponse.data
          getdata.createArrows()
        }))
        .catch(function (error) {
          console.log("Invalid request")
        })
},
createArrows: function() {
  }
},
created() {
this.getData()
}


}
</script>

Answer 1

我认为这是一个典型的异步问题。

使用 v-on，您对 createArrows 的调用是“按时间”在 getSteps 和 getEvents 之后进行的：这意味着 getSteps 和 getEvents 已完成执行其内部 ajax 承诺，已将相关数据填充到组件实例中以供 createArrows 查找和访问。

但是，在 created() 钩子中，如果你仔细想想，调用会立即通过 createArrows() （在 getSteps 和 getEvents 中的承诺事情完成之前）。

您必须在 created() 中重构对 createArrows 的调用，因为它可以在那里正常工作。