Estoy trabajando en éste proyecto con Laravel y Vue.js. Necesito mostrar una tabla con mucha información. Para ello decidí usar un componente Vue que renderice una tabla y los botones de paginación con poca información.
Esto funciona muy bien en la teoría, porque en la práctica las variables que le paso a la instancia del componenete no son obtenidas correctamente (o no lo sé hacer).
Tengo tres partes fundamentales si no me equivoco:
El archivo app.js que contiene la instancia principal y la llamada a la API:
Vue.component('activities-table', require('./components/ActivitiesTableComponent.vue'));
...
const app = new Vue({
el: '#app',
data: {
...
activities: [],
...
},
mounted: function() {
...
},
created: function() {
...
this.loadActivities();
...
},
methods: {
...
loadActivities: function(page = 1) {
axios.get('/api/admin/actividades?page=' + page)
.then(function (response) {
app.activities = response.data;
});
},
...
},
...
});
Creo que es importante destacar que la llamada a la API se realiza correctamente y que la información devuelta es un archivo JSON, desde el contralador. Éste tiene un método muy simple:
public function getActivities(Request $request)
{
$activities = Activity::orderBy('created_at', 'desc')->paginate(100);
return $activities;
}
Esto devuelve un objeto LengthAwarePaginator con la siguiente información:
Que traducida a JSON queda:
Nota: Esto también se puede constatar en la herramienta de desarrollador de Vue donde
activities
tiene la información correcta.
Dando un gran salto de información, renderizamos la tabla con el elemento <activities-table :rows="this.activities"></activities-table>
y luego en éste definimos:
<template>
<!-- Actividades -->
<table id="activities" class="table table-bordered table-striped" width="100%">
...
</table>
<!-- /Actividades -->
<!-- Paginación -->
<div class="row d-flex justify-content-center pt-4">
...
</div>
<!-- /Paginación -->
</template>
<script>
module.exports = {
props: [ 'rows' ],
data: function() {
return {
data: this.rows
}
},
created: function() {
},
methods: {
paginate: function(page) {
}
}
}
</script>
Cuando hago console.log(this.rows)
en el ciclo created
o mounted
me aparece la siguiente información:
[
¿por qué no funciona esto?
rows
al componente? – Shaz el 2 mar. 18 a las 21:59rows
definida en el componente? Solo por curiosidad, ¿por qué quieres pasarlos adata
? – Shaz el 2 mar. 18 a las 22:02this.rows
. – Maramal el 2 mar. 18 a las 22:05