Vuetify v-data-table paginación: el valor de options.page cambia en mounted()

Estoy utilizando Nuxt 2.15.8 y @nuxtjs/vuetify 1.12.1 (Vuetify 2).

Tengo una v-data-table con paginación en el lado del servidor, cada fila/item tiene un enlace a una página de detalle. Todo funciona bien.

Cuando el usuario navega en la v-data-table, agrego el número de página a la URL ?page=2 por lo que cuando el usuario hace clic en el botón de retroceso del navegador desde la página de detalle, puedo restablecer la v-data-table donde estaban. (Estoy haciendo lo mismo con los criterios de búsqueda y está funcionando perfectamente).

Si registro this.options.page en created(), tengo el número correcto, pero en mounted() se restablece a 1 y no puedo entender por qué.

Las llamadas a la API se realizan desde el watcher en options.

La plantilla

html

<v-data-table

  :headers="headers"

  :items="items"

  :options.sync="options"

/>

El script (hace lo mismo si lo preestablezco en 1 o 0…)

js

data() {

  return {

    options: {

      page:

        this.$route.query && this.$route.query.page

          ? Number(this.$route.query.page)

          : 0

    }

  }

}

He intentado tantas cosas para solucionarlo (agregar una bandera para evitar múltiples llamadas a la API, restablecer options.page después de la llamada a la API pero terminé con dos llamadas…) que no puedo enumerar todas aquí.

Reconozco que probablemente no tengo una comprensión completa del ciclo de vida de Nuxt y de la v-data-table, así que cualquier información al respecto será realmente apreciada. Lo mejor sería un ejemplo funcional :* Cualquier información que pueda proporcionar para ayudar, por favor pregúnteme.

El único tema que encontré relacionado con mi problema es este antiguo, pero sin respuesta.

¡Gracias!

davy.ai

June 4, 2023 at 11:08 am

Problema con options.page restablecido a 1 en mounted() en la paginación del lado del servidor usando Nuxt.js y Vuetify.js

Actualmente estoy trabajando en la implementación de paginación del lado del servidor utilizando Nuxt.js versión 2.15.8 y Vuetify.js versión 1.12.1 (Vuetify 2). Mi v-data-table tiene un enlace a una página de detalles y todo funciona bien.

Sin embargo, cuando el usuario navega a la página de detalles y hace clic en el botón de retroceso del navegador, el options.page en la URL ?page=2 se restablece a 1 en el hook mounted(), pero tiene el número correcto en created(). No puedo entender por qué está sucediendo esto.

Las llamadas a la API se realizan desde el watch en options. Aquí está mi código:

<v-data-table :headers="headers" :items="items" :options.sync="options"></v-data-table>

data() {
  return {
    options: {
      page:
        this.$route.query && this.$route.query.page
          ? Number(this.$route.query.page)
          : 0
    }
  }
}

He intentado varias soluciones, como agregar una bandera para evitar múltiples llamadas a la API, restablecer options.page después de la llamada a la API (lo que resulta en dos llamadas), y así sucesivamente, pero no he tenido éxito.

Sospecho que el problema puede estar relacionado con el ciclo de vida de Nuxt y v-data-table. Agradecería cualquier ayuda, incluyendo un ejemplo de trabajo. Si necesita información adicional, no dude en preguntar.

Encontré un tema relacionado [aquí] (https://stackoverflow.com/questions/57291778/when-retreiving-state-of-data-table-from-vuex-pagination-is-not-updated), pero no proporciona una solución. Gracias.

Answer

davy.ai

June 4, 2023 at 11:08 am
Problema con options.page restablecido a 1 en mounted() en la paginación del lado del servidor usando Nuxt.js y Vuetify.js

Actualmente estoy trabajando en la implementación de paginación del lado del servidor utilizando Nuxt.js versión 2.15.8 y Vuetify.js versión 1.12.1 (Vuetify 2). Mi v-data-table tiene un enlace a una página de detalles y todo funciona bien.

Sin embargo, cuando el usuario navega a la página de detalles y hace clic en el botón de retroceso del navegador, el options.page en la URL ?page=2 se restablece a 1 en el hook mounted(), pero tiene el número correcto en created(). No puedo entender por qué está sucediendo esto.

Las llamadas a la API se realizan desde el watch en options. Aquí está mi código:
```
<v-data-table :headers="headers" :items="items" :options.sync="options"></v-data-table>
```
```
data() {
  return {
    options: {
      page:
        this.$route.query && this.$route.query.page
          ? Number(this.$route.query.page)
          : 0
    }
  }
}
```
He intentado varias soluciones, como agregar una bandera para evitar múltiples llamadas a la API, restablecer options.page después de la llamada a la API (lo que resulta en dos llamadas), y así sucesivamente, pero no he tenido éxito.

Sospecho que el problema puede estar relacionado con el ciclo de vida de Nuxt y v-data-table. Agradecería cualquier ayuda, incluyendo un ejemplo de trabajo. Si necesita información adicional, no dude en preguntar.

Encontré un tema relacionado [aquí] (https://stackoverflow.com/questions/57291778/when-retreiving-state-of-data-table-from-vuex-pagination-is-not-updated), pero no proporciona una solución. Gracias.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Answer

davy.ai