Actualmente tengo problemas para configurar la página de una tabla de datos externamente antes de que se carguen los datos de la tabla. En mi aplicación, la página de la tabla de datos proviene de la URL o del almacenamiento local. En teoría, tan pronto como se crea el componente, sé en qué página de la tabla debe terminar el usuario.
Pero configurar la página inmediatamente no servirá de nada porque después de cargar los datos de la tabla, la página de la tabla vuelve a establecerse en 1. Pero dado que generalmente uso una propiedad calculada para mantener los datos de la tabla, simplemente espero los cambios en esto y luego actualizo la página de la tabla. Lamentablemente, esto no funciona si hay una gran cantidad de datos o si la estructura de datos es más complicada, la representación demora un poco más, por lo que mi actualización llega demasiado pronto.
No pude encontrar ningún indicio en los documentos de que esto no es compatible y creé un problema de github ya que me parece un error, al menos a juzgar por algunos datos contradictorios en las herramientas de desarrollo.
También traté de recrear el escenario en un codepen , obviamente, en este caso, uno podría esperar hasta que se complete "loadData", pero como dije para mi aplicación, el ligero retraso entre obtener los datos y aparecer en la tabla parece ser el problema, pero conduce al mismo resultado al final.
Intenté lo mismo con la propiedad options pero no pude ver ninguna diferencia notable:
:options.sync="myOptions"¿Tienen alguna recomendación sobre cómo manejar esto? ¿Alguna forma de mantener la página después de que los datos cambien o alguna forma confiable de actualizar la página después de que la tabla se complete y represente? Siento que probé la mayoría de los eventos de la mesa pero aún no tuve suerte.
¡Gracias por adelantado! :)
Esto realmente parece ser un error en vuetify. Cuando se actualizan los elementos, la página se restablece a 1, pero solo dentro del componente. El apoyo de la page nunca refleja ese cambio.
Una solución sería activar un cambio de la variable de page de nuestro lado. Entonces, en su ejemplo, puse lo siguiente al final del método loadData .
const p = this.page this.page = 1 this.$nextTick(() => { this.page = p }) Esto vuelve a sincronizar la propiedad de la page con el componente y parece que la página correcta se carga de inmediato, al menos dentro del codepen.