Estoy tratando de crear una aplicación web basada en una base de datos. Configuración: NodeJS y una aplicación Vuejs 2 generada con la CLI (con Webpack). Actualmente, estoy usando axios para recuperar registros en un objeto. Basado en ese objeto, quiero dibujar algunas líneas svg desde ciertos puntos a otros puntos. El método funciona completamente según lo diseñado cuando se ejecuta desde un @click (directiva v-on). Sin embargo, cuando trato de agregarlo al gancho creado, no funciona. No se muestran errores. Simplemente no está funcionando. ¿Alguien sabe por qué? Ejemplo de código a continuación.
<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() } }EDITAR: Las promesas ya están incluidas en la biblioteca axios. Como soy nuevo en este concepto, me perdí este. Código refactorizado a continuación:
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>Creo que es un problema asincrónico clásico.
Con v-on, su llamada a createArrows es "en el tiempo después de" getSteps y getEvents: lo que significa que getSteps y getEvents terminaron de ejecutar sus promesas internas de ajax, completaron los datos relevantes en la instancia del componente para que createArrows los encuentre y acceda.
Sin embargo, dentro del hook created(), si lo piensas, las llamadas caen en createArrows() instantáneamente (antes de que las cosas prometedoras dentro de getSteps y getEvents hayan terminado).
Tendrá que refactorizar la llamada a createArrows dentro de created() como promesa de resolución para que funcione allí correctamente.