0

Estoy desarrollando una api rest con Laravel y Vue y me he encontrado con un problema en el front-end. Resulta que tengo un formulario en el que necesito mostrar mediante 2 selects diferentes datos de 2 tablas diferentes, por ende de 2 urls distintas. Y después de eso debo enviar por post todos los datos ingresados a otra url. Hasta el momento he buscado pero no encontré la solución. Solamente conseguí mostrar los datos pero de una sola url. Aquí el código del componente:

<script>
    
    import axios from 'axios'

    export default {
        name: 'Formulario',
        data(){
            return {
                projectmanagers: []
            }
        },
        mounted(){
            let vue = this;
            axios.get('http://localhost/estoes/api/projectmanagers')
            .then(function(response){
                vue.projectmanagers = response.data
            })
        }
    }
</script>
1
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! No termino de entender tu problema... asi como haces get a esa url, podes hacer get a otra...
    – gbianchi
    Commented el 1 feb. 2021 a las 19:23

2 respuestas 2

0

Prueba a usar esto

<script>

import axios from 'axios'

export default {
    name: 'Formulario',
    data(){
        return {
            projectmanagers: [],
            select1: [],
            select2: [],
        }
    },
    mounted(){
        axios.get('http://localhost/estoes/api/projectmanagers')
        .then(function(response){
            this.select1 = response.data
        });
        axios.get('URL_2')
        .then(function(response){
            this.select2 = response.data
        });
    }
}
0

Aunque llamar las peticiones desde mounted no esta mal, no es lo recomendable, puede que en ese caso tengas problemas de reactividad. Una manera de solucionarlo es usando metodos, que pueden ser asincronos y luego ejecutalos en el mounted hook.

mounted() {
     this.llamada1();
     this.llamada2();
},
methods: {
    async llamada1(){
        await axios.get('URL1/foo/bar')....
    },
    async llamada2(){
        await axios.get('URL2/foo/bar')....
    }
}

de esta manera tienes tus variables reactivas y puedes volver a hacer las llamadas en caso de que sea necesario.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.