Question

我正在尝试基于数据库创建一个Web应用程序。设置：使用CLI（使用Webpack）生成的NodeJS和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中的promisy事件完成之前）。

你必须在create（）内部重构对createArrows的调用，因为它可以正确地解析它。

方法无法从创建的钩子Vue.js工作

1 个答案: