HablemosDeVueJS / doctor-vue

Resolución de problemas que ocurren al desarrollar en VueJS
2 stars 1 forks source link

nextPage no suma #2

Closed IsraelDCastro closed 4 years ago

IsraelDCastro commented 4 years ago
<div class="btn-group">
      <button @click="prevPage">prev</button>
      <button class="btn btn-primary" v-for="p in pagination.pages" @click.prevent="setPage(p)">{{p}}</button>
      <button @click="nextPage">next</button>
</div>

`methods: { setPage(p) { this.pagination = this.paginator(this.products.length, p); }, paginate(products) { return .slice(products, this.pagination.startIndex, this.pagination.endIndex + 1) }, paginator(totalItems, currentPage) { var startIndex = (currentPage - 1) * this.perPage, endIndex = Math.min(startIndex + this.perPage - 1, totalItems - 1); return { currentPage: currentPage, startIndex: startIndex, endIndex: endIndex, pages: .range(1, Math.ceil(totalItems / this.perPage) + 1) }; }, prevPage(){ this.pagination.currentPage-- }, nextPage(){ this.pagination.currentPage++ }, },

created() { this.setPage(1); }`

rolandoesc commented 4 years ago

¿El botón donde está alojado nextPage muta la propiedad currentPage de this.pagination?

IsraelDCastro commented 4 years ago

Si, esa seria la idea, pero no lo hace, tampoco al hacer click aparece algun error

rolandoesc commented 4 years ago

¿qué indica?

Por otro lado, estoy viendo que el método paginator es quien define las variables del objeto, ¿Sí te muta la variable correctamente?

IsraelDCastro commented 4 years ago

Si, de hecho al hacer click <button class="btn btn-primary" v-for="p in pagination.pages" @click.prevent="setPage(p)">{{p}}</button> en las respectivas pages que aparecen ahi, funcionan, pero cuando trato con nextPage o prevPage no pasa nada

rolandoesc commented 4 years ago

Haz un console.log() de this.pagination al final de tu método setPage a ver que sale.

También puedes usar <code>{{pagination}}</code> si lo quieres ver en la pantalla más facilmente.

UPDATE:

Imagen del console.log

rolandoesc commented 4 years ago

Viendo el codepen que enviaste en el grupo de telegram, el bug se encuentra en que debes volver a llamar a this.setPage(this.pagination.currentPage) para que haga el set de valores a renderizar.

Comparto este codepen para que se vea que el cambio lo hace correctamente. 😄