Nuxt Vuetify apply nuxt-link on v-pagination

1
votes

I have a .vue file like below

<template>
  <v-pagination
    v-if="totalPage > 1"
    v-model="currentPage"
    :total-visible="10"
    class="mt-6"
    :length="totalPage"
    color="#FF9A00"
  ></v-pagination>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: this.$route.params.id ? parseInt(this.$route.params.id) : 1,
        count: 100,
        pageLimit: 10
      }
    },
    computed: {
      totalPage() {
        return Math.ceil(this.count / this.pageLimit)
      },
    },
    watch: {
      currentPage(val) {
        this.$router.push({ name: 'article-page-id', params: { id: val } })
      }
    },
  }
</script>

But the pagination of routes depend on the watch(). I was hoping I can make use of actual links instead so I can have my crawlers in nuxt generate produce static HTML on the pages of these paginations as well

UPDATE: I saw some workarounds in https://github.com/vuetifyjs/vuetify/issues/4855 but I am not quite sure where to put those workarounds.. Are they components, plugins? I am not sure

2
vuetify.jsnuxt.js
I have a silly idea...how about instead of pushing the router, make a link and click it using js? – ma_jafari
That suggestion is one of my last thing to do. Another is just not use v-pagination at all – Dean Christian Armada
But will it work? – ma_jafari
so did it work? – ma_jafari
I will give you credit. It did not work but it gave me an idea on how to solve it. I did a cheat. <nuxt-link :to="{name: 'name', params: $route.params.page + 1}" style: 'visibility:hidden'>$route.params.page + 1</nuxt-link> – Dean Christian Armada

2 Answers

2
votes

How about instead of pushing the router, make a link and click it using js like this:

    watch: {
      currentPage(val) {
                let link = document.createElement('a');
                link.href = /*you'r domain + */ this.$route.path + "/article-page-id/" + this.$route.params.id;
                link.click()      
    }

Good luck!

0
votes

You could use the @input event like this:

<template>
  <v-pagination
    v-if="totalPage > 1"
    v-model="currentPage"
    :total-visible="10"
    class="mt-6"
    :length="totalPage"
    color="#FF9A00"
    @input="handlePagination($event)"
  ></v-pagination>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: this.$route.params.id ? parseInt(this.$route.params.id) : 1,
        count: 100,
        pageLimit: 10
      }
    },
    computed: {
      totalPage() {
        return Math.ceil(this.count / this.pageLimit)
      },
    },
    methods: {
      handlePagination(e) {
        // APPLY YOUR OWN ROUTER PUSH LOGIC HERE
        // THE EVENT SHOULD CONTAIN THE CURRENT PAGE
        this.$router.push({ name: 'article-page-id', params: { id: val } })
      }
    },
  }
</script>