0

Estoy haciendo una aplicación en Laravel 5.6 y Vuejs, en la cual tengo dos componentes, uno se llama MyEvent.vue y el otro Pagination.vue. En el primero se despliega una tabla con los datos de eventos y la cual debe tener al pie de la tabla los botones de anterior, número de paginas y siguiente, de esto se encarga el segundo componente llamado pagination.vue, el problema es que no me está mostrando el total de paginas que debería aparecer en la paginación, solamente me salen los botones de anterior y siguiente. Al hacer console.log desde el MyEvent.vue, me muestra toda la información del arreglo y la de la paginación, el problema está en pasarle la información de paginación al componente Pagination.vue pues al hacer console.log desde ese componente, me muestra los datos del props en null.

Aquí va parte del código de ambos componentes.

myevent.vue (notar my-pagination :source="pagination", se va con información pero en el componente pagination.vue la variable :source se muestra null)

<div class="">
                        **<my-pagination :source="pagination"></my-pagination>**
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="alert alert-warning alert-rounded"> 
                    <h5 class="text-center">
                        <i class="mdi mdi-24px mdi-calendar-clock"></i>
                        Hasta el momento no he aportado ningún evento.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

 <script>
   import moment from "moment";
   import myPagination from "../events-users/pagination.vue";
   export default {
   name: "myevent",
   components: {
      myPagination
   },
    created() {
      this.getEvent();
    },
    data() {
    return {
      allMyEvent: [],
      searchEventTable: "",
      pagination: {}
    };
  },
  methods: {
    getEvent() {
      var urlMyAllEvent = "/dashboard/myEvent";
      axios.get(urlMyAllEvent)
        .then(response => {
          this.allMyEvent = response.data.data;
          this.pagination = response.data;
        })
        .catch(e => {
          console.log(e);
        });
    }
  }

};
</script>

pagination.vue ( la variable {{ page }} no muestra nada y el props source también)

<template>
  <div>
      <nav aria-label="Page navigation example">
          <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                  <a class="page-link" href="#" tabindex="-1">Anterior</a>
              </li>
              <li v-for="page in pages" class="page-item">
                  <a class="page-link" href="#">{{ page }}</a>
              </li>

            <li class="page-item">
                <a class="page-link" href="#">Siguiente</a>
            </li>
        </ul>
      </nav>
  </div>

<script>
  import { range } from 'lodash'
   export default {
      props: ['source'],
      data () {
          return {
              pages: []
            }
       },
      watch: {
         source () {
               this.pages = range(1, this.source.last_page+1);
          }
      }
   }
 </script>

Así se ve la tabla

introducir la descripción de la imagen aquí

¿Alguna idea del problema del props?, soy nuevo en Laravel y Vue

5
  • ¿Como retornas los datos desde Laravel ? reproducí su código y al parecer no parece haber problemas.
    – Dev. Joel
    el 9 abr. 2018 a las 6:16
  • Desde el controlador mediante el metodo myEvent public function myEvent() { $allMyEvent = Event::with('coins') ->where('user_id', '=', Auth::user()->id) ->where('status', '!=', 'RECHAZADO') ->orderBy('created_at', 'DESC') ->paginate(5); return response()->json($allMyEvent, 200); }
    – Felipe
    el 9 abr. 2018 a las 6:19
  • ¿Verificaste los datos que obtienes de la petición AJAX son correctos? el 11 abr. 2018 a las 17:04
  • Según lo que me dice vuedev tool si, la variable pagination se va cargada con la sección correspondiente a la paginación que envía la respuesta json desde el controlador, el tema está es que algo sucede que al momento de source="pagination", en el componente pagination.vue no se leen los datos, el props me aparece vacío.
    – Felipe
    el 11 abr. 2018 a las 19:13
  • pon un console.log(this.source) dentro del watch source() para ver si observa luego que haces el request en el padre. el 4 jul. 2019 a las 4:12

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.