CODEWITHSUNDEEP
javascriptnode.jssvgvuejs2axios
Imre_G
Imre_G

Reputation: 2535

Method not working from created hook Vue.js

I am trying to create a web app based on a database. Setup: NodeJS and a Vuejs 2 app generated with the CLI (with Webpack). Currently, I am using axios to retrieve records into an object. Based on that object I want to draw some svg lines from certain points to other points. The method works completely as designed when running it from an @click (v-on directive). However, when I try to add it to the created hook it doesn't work. No errors displayed. It's just not running. Does anyone no why? Code example below. 

<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()
}


}

EDIT: Promises are already included in the axios library. Since I am new to this concept I missed this one. Refactored code below: 

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>

Upvotes: 1

Views: 5382

Answers (1)

BluePill
BluePill

Reputation: 515

I think it's a classic async issue.

With v-on, your call to createArrows is "timewise after" getSteps and getEvents: meaning that getSteps and getEvents have finished executing their internal ajax promises, have populated the relevant data into the component instance for createArrows to find and access.

However, inside the created() hook, if you think about it, the calls fall through to createArrows() instantaneously (before the promisy things inside getSteps and getEvents have finished).

You'll have to refactor the call to createArrows inside created() as promise resolve for it work there correctly.

Upvotes: 1

Related Questions