2

Viendo todas las preguntas que hay en la comunidad ninguna logró que se me aclaren las dudas que tengo, por eso decidí crear otra pregunta para explicar un poco más de detalles.

Tengo un componente donde tengo un formulario:

Formulario.vue:

<template>
    <div class="container"> 
        <h2 class="text-center">Encarga tu libro, rápido y fácil!</h2>
        <div class="card card-body bg-light">
            <h6 class="text-center">Rellena el formulario con la información</h6>
            <form v-on:submit.prevent="createPedido">
                <div class="input-group mb-3 col-4">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="anio">Año</label>
                    </div>
                    <select class="custom-select" id="anio" v-model="anio">
                        <option selected>Elegí el año</option>
                        <option value="1°">1°</option>
                        <option value="2do">2do</option>
                        <option value="3ro">3ro</option>
                    </select>
                </div>

                <div class="input-group mb-3 col-4">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="division">División</label>
                    </div>
                    <select class="custom-select" id="division" v-model="divi">
                        <option selected>Elegí la división</option>
                        <option value="1°">1ra</option>
                        <option value="2do">2da</option>
                        <option value="3ro">3ra</option>
                        <option value="4ta">4ta</option>
                    </select>
                </div>

                <div class="input-group mb-3 col-4">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="turno">Turno</label>
                    </div>
                    <select class="custom-select" id="turno" v-model="turn">
                        <option selected>Elegí el turno</option>
                        <option value="1">Mañana</option>
                        <option value="2">Tarde</option>
                        <option value="3">Noche</option>
                    </select>
                </div>

                <div class="input-group mb-3 col-4">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="materia">Materia</label>
                    </div>
                    <select class="custom-select" id="materia" v-model="mat">
                        <option selected>Elegí la Materia</option>
                        <option value="1">Historia</option>
                        <option value="2">Lengua</option>
                        <option value="3">Matematica</option>
                    </select>
                </div>

                <div class="input-group mb-3 col-4">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="profesor">Profesor/a</label>
                    </div>
                    <select class="custom-select" id="profesor" v-model="prof">
                        <option selected>Juan Ciancio</option>
                    </select>
                    <small>Si no coincide el profesor detectado por el Sistema, despliega para ver más opciones</small>
                </div>

                <input type="submit" class="btn btn-success" value="Enviar">
            </form>     
        </div>
    </div>  
</template>

<script>
    import axios from 'axios';
    import toastr from 'toastr';

    export default {

        data (){
            return {
                anio: '',
                divi: '',
                turn: '',
                mat: '',
                prof: '',
            }
        },
        methods: {
            createPedido: function(){
                var url = 'pedido/realizar';
                axios.post(url, {
                    anio: this.anio,
                    division: this.divi,
                    turno: this.turn,
                    materia: this.mat,
                    profesor: this.prof,
                }).then(response => {
                    this.$refs.pedidos.methods.getPedidos();
                    this.anio = '';
                    this.divi = '';
                    this.turn = '';
                    this.mat = '';
                    this.prof = '';
                    toastr.success('El pedido se ha registrado correctamente');
                }).catch(error => {
                    toastr.error('Error');
                });
            }
        }
    }
</script>

Y luego tengo otro componente VUE que hace el listado mediante una ruta GET

Pedidos.vue:

<template>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                  <th scope="col">Año</th>
                  <th scope="col">División</th>
                  <th scope="col">Turno</th>
                  <th scope="col">Materia</th>
                  <th scope="col">Profesor</th>
                  <th scope="col">Fecha</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="pedido in pedidos">
                    <td>{{ pedido.year }}</td>
                    <td>{{ pedido.division }}</td>
                    <td>{{ pedido.turno }}</td>
                    <td>{{ pedido.materia }}</td>
                    <td>{{ pedido.teacher }}</td>
                    <td><small>{{ since(pedido.created_at) }}</small></td>
                </tr>

            </tbody>
        </table> 
    </div>
</template>

<script>
    import axios from 'axios'

    import moment from 'moment'

    moment.locale('es');

    export default {
       data(){
            return {
                pedidos: [],
            }
       },
       created: function() {
            this.getPedidos();
       },
       methods: {
            since: function(d){
                return moment(d).fromNow();
            },
            getPedidos: function(){
                var urlPedidos = 'pedidos';
                axios.get(urlPedidos).then(response => {
                    this.pedidos = response.data
                });
            }
       }
    }
</script>

Probe hacer de mil maneras el listado al momento de enviar el formulario ( con $emit, con $refs ) y ninguna me resulta. Mi gran pregunta es: ¿Como puedo llamar al método getPedidos() a través del componente Formulario.vue, para que se listen todos los pedidos al momento de yo enviar el formulario?

Los dos componentes se importan de la misma forma ( en la que Laravel lo hace )

Vue.component('pedido', require('./components/Pedido.vue'));
Vue.component('formulario', require('./components/Formulario.vue'));

Muchas gracias y mil disculpas si me expresé mal.

2
  • Hola Juance, para ayudarte mejor, muestra como estas usando los componentes en la parte de html. el 11 nov. 2018 a las 17:24
  • Mil disculpas. Ya edité la pregunta y agregué el código html!
    – Juance
    el 11 nov. 2018 a las 22:01

1 respuesta 1

2

Para tu caso tienes 2 opciones, hacer uso de Vuex o crear un Event Bus. A continuacion explicaré como implentarías un Global Event Bus, ya que con el cual no tienes que instalar otras dependencias y no le agregará tanta complejidad innesearia para tu caso.

Event Bus

1) Crea un nuevo archivo event-bus.js con el contenido:

import Vue from 'vue';

const EventBus = new Vue();
export default EventBus;

2) Importalo en los componentes que necesiten comunicarse. Eg.

// Agregalo en Formulario.vue y Pedido.vue
<script>
import EventBus from "./event-bus"; // acomada la ruta dependiendo de donde lo creaste
</script>

3) ¿Cómo usarlo?

EventBus.$emit('nombreDeEvento', parametros); // Para emitir un evento
EventBus.$on('nombreDeEvento', function(parametros) { // Para recibir un evento
   //
});

4) ¿Cómo usarlo en tu código?

// En formulario.vue
<script>
 ...
 axios.post(url, {
       ...
 }).then(response => {
     // this.$refs.pedidos.methods.getPedidos(); (Remueve esto)
     EventBus.$emit('event.getPedidos'); /* Agrega esto*/
     ....
 ))
 ...
</script>

// En pedido.vue (dentro de mounted)
<script>    
   ....
   created: function() {
      ...
   },
   mounted: function() { /* Agrega mounted y con el siguiente contenido */
        let self = this;
        EventBus.$on('event.getPedidos', function () {
            self.getPedidos(); // ejecutas el metodo que desees 
        });
   },
   methods: {
      ....
   }
</script>

5) Esto es todo, como recomendación te diría que le des un vistazo a Vuex, en cierta mayoría de los casos es preferible usarlo pero como mencione le agregará complejidad a tu código. Aquí te dejo el repositorio oficial de vuex donde ejemplifica su uso.

12
  • Muchísimas gracias por haberte tomado el tiempo de explicarme el uso del Event Bus, le echaré también una mirada a Vuex, que quizá me ayude mucho más. Con respecto al código que me pasaste, he puesto todo como me dijiste, paso a paso, pero al momento de hacer un pedido, el mismo no se agrega a la tabla, sino que, tengo que volver a recargar la página para que éste aparezca.
    – Juance
    el 13 nov. 2018 a las 16:08
  • pon un console.log dentro de EventBus.$on en pedido.vue para verificar si se está recibiendo el evento. Confirmalo por la consola y me avisas. el 13 nov. 2018 a las 16:13
  • no, el evento no se está recibiendo porque en la consola no me imprime nada! puede ser que el problema esté porque las 2 vistas son diferentes?, es decir, yo tengo en el navegador 2 pestañas donde, en una abro el formulario y en otra tengo el listado de pedidos!
    – Juance
    el 13 nov. 2018 a las 16:24
  • en ese caso, EventBus no servirá de nada, ya que se aplica para componentes en la misma página. Lo que puedes hacer entonces si usas componentes en diferentes paginas es ejecutar tu metodo getPedidos cada X segundos, usando setInterval dentro de mounted() el 13 nov. 2018 a las 16:36
  • 1
    Muchas gracias por haberme despejado todas las dudas!! Saludo!
    – Juance
    el 13 nov. 2018 a las 17:05

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.