Vuetify - Sync pagination with URL params

Question

Vuetify has a Data table component which supports external pagination + sorting (via API).
What's the best way to sync these with URL params (2-way binding)?

---

Example URL:
http://localhost:3000/users?page=22

When I go to this link, I want to see 22 as the current page in the pagination. When I click the Next button in the pagination component, I want to see the URL updated to http://localhost:3000/users?page=23

Answer 1

You can do this:

1. Assocciate @pagination event to some method and 'page' prop whith data item.
2. In you method, set the url with window.history.pushState
3. In created() lifecycle hook, get query param from url and set it into data.

An example:

<template>
<div>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
    @pagination="setQueryPage"
    :page="paramPage"
  ></v-data-table>
</div>
</template>
<script>
  export default {
    data () {
        return {
            headers: [
            {
                text: 'Dessert (100g serving)',
                align: 'start',
                sortable: false,
                value: 'name',
            },
            { text: 'Calories', value: 'calories' },
            { text: 'Fat (g)', value: 'fat' },
            { text: 'Carbs (g)', value: 'carbs' },
            { text: 'Protein (g)', value: 'protein' },
            { text: 'Iron (%)', value: 'iron' },
            ],
            desserts: [
            {
                name: 'Frozen Yogurt',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                iron: '1%',
            },
            {
                name: 'Ice cream sandwich',
                calories: 237,
                fat: 9.0,
                carbs: 37,
                protein: 4.3,
                iron: '1%',
            },
            {
                name: 'Eclair',
                calories: 262,
                fat: 16.0,
                carbs: 23,
                protein: 6.0,
                iron: '7%',
            },
            {
                name: 'Cupcake',
                calories: 305,
                fat: 3.7,
                carbs: 67,
                protein: 4.3,
                iron: '8%',
            },
            {
                name: 'Gingerbread',
                calories: 356,
                fat: 16.0,
                carbs: 49,
                protein: 3.9,
                iron: '16%',
            },
            {
                name: 'Jelly bean',
                calories: 375,
                fat: 0.0,
                carbs: 94,
                protein: 0.0,
                iron: '0%',
            },
            {
                name: 'Lollipop',
                calories: 392,
                fat: 0.2,
                carbs: 98,
                protein: 0,
                iron: '2%',
            },
            {
                name: 'Honeycomb',
                calories: 408,
                fat: 3.2,
                carbs: 87,
                protein: 6.5,
                iron: '45%',
            },
            {
                name: 'Donut',
                calories: 452,
                fat: 25.0,
                carbs: 51,
                protein: 4.9,
                iron: '22%',
            },
            {
                name: 'KitKat',
                calories: 518,
                fat: 26.0,
                carbs: 65,
                protein: 7,
                iron: '6%',
            },
            ],
            paramPage : 1,
        }

    },
    methods: {
       setQueryPage(paginationObject){
           let url = 'users?page='+ paginationObject.page
           window.history.pushState("", "", url);
        }
    },
    created(){
        console.log(this.$route.query.page)
        this.paramPage = parseInt(this.$route.query.page)
    }

  }
</script>