CODEWITHSUNDEEP
vuetify.jsnuxt.js
Dean Christian Armada
Dean Christian Armada

Reputation: 7384

Nuxt Vuetify apply nuxt-link on v-pagination

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

Upvotes: 1

Views: 1713

Answers (2)

ma_jafari
ma_jafari

Reputation: 1059

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!

Upvotes: 2

Erubiel
Erubiel

Reputation: 2972

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>

Upvotes: 0

Related Questions