###概要 [vuetifyの公式 paginate](https://vuetifyjs.com/ja/components/data-tables) こちら`vuetify`の公式にある`paginate`なのですが、`rowsPerPage`の値を変更すると、`現在の表示 of 最大表示件数`の部分が自動的に変わります。これは`vuetify`の`paginate`としての仕様である挙動と思うのですが、やりたいこととして、とあるボタンをクリックした時にテーブルの情報が更新（ajax）される仕組みにはなるのですが、同時に`rowsPerPage`の値をページロード時の初期値に戻したい（同時に`現在の表示 of 最大表示件数`の部分も変わると思うのですが）という内容になります。 ※初期値に戻したい。というのは、例えばページロード時、ページ送りをしていた場合、`現在の表示 of 最大表示件数`の部分が更新されます。ボタンをクリックしてテーブル情報を更新した場合、テーブルの表示は1件目からの表示になる作りにしているのですが、`現在の表示 of 最大表示件数`の部分が更新されずページ送りをした状態のまま表示されています。これでは実際にテーブルに表示されているものと不一致になってしまうため、それを一致させたいという目的です。 ###サンプルコードサンプルではボタンクリック時テーブル情報の更新は行なっていません。 ```html

``` ```css .example-btn { padding: 10px; margin: 10px; width: 100px; border: 1px solid #000; border-radius: 5px; } [aria-label="Rows per page:"] { font-weight: bold; } ``` ```javascript // // Vuex version of: // https://vuetifyjs.com/en/components/data-tables#example-server // // 試しにクリックイベントを仕掛けてみたが動かず... setTimeout(() => { const rowsPerPageBtn = document.querySelector('[aria-label="Rows per page:"]'); const int = rowsPerPageBtn.querySelector('.input-group__input'); const num = rowsPerPageBtn.querySelector('.input-group__selections__comma'); console.log(int); setTimeout(() => { int.addEventListener('click', () => { console.log('click'); }, false); }, 1000); }, 1000); // ここまで var store = new Vuex.Store({ strict: true, state: { pagination: { descending: true, page: 1, rowsPerPage: 4, sortBy: 'fat', totalItems: 0, rowsPerPageItems: [1, 2, 4, 8, 16] }, items: [] }, mutations: { setPagination (state, payload) { state.pagination = payload }, _setItems (state, { items, totalItems }) { state.items = items Vue.set(state.pagination, 'totalItems', totalItems) } }, actions: { queryItems (context) { return new Promise((resolve, reject) => { const { sortBy, descending, page, rowsPerPage } = context.state.pagination setTimeout(() => { let items = _desserts.slice() const totalItems = items.length if (sortBy) { items = items.sort((a, b) => { const sortA = a[sortBy] const sortB = b[sortBy] if (descending) { if (sortA < sortB) return 1 if (sortA > sortB) return -1 return 0 } else { if (sortA < sortB) return -1 if (sortA > sortB) return 1 return 0 } }) } if (rowsPerPage > 0) { items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage) } context.commit('_setItems', { items, totalItems }) resolve() }, 1000) }) } }, getters: { loading (state) { return state.loading }, pagination (state) { return state.pagination }, items (state) { return state.items } } }) new Vue({ el: '#app', store, data () { return { loading: false, headers: [ { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' }, { text: 'Calories', value: 'calories', align: 'center' }, { text: 'Fat (g)', value: 'fat', align: 'center' }, { text: 'Carbs (g)', value: 'carbs', align: 'center' }, { text: 'Protein (g)', value: 'protein', align: 'center' }, { text: 'Iron (%)', value: 'iron', align: 'center' } ] } }, watch: { pagination: { handler () { this.loading = true this.$store.dispatch('queryItems') .then(result => { this.loading = false }) }, deep: true } }, computed: { pagination: { get: function () { return this.$store.getters.pagination }, set: function (value) { this.$store.commit('setPagination', value) } }, items () { return this.$store.getters.items } }, methods: { } }) const _desserts = [ { value: false, name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%' }, { value: false, name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%' }, { value: false, name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%' }, { value: false, name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%' }, { value: false, name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%' }, { value: false, name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%' }, { value: false, name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%' }, { value: false, name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%' }, { value: false, name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%' }, { value: false, name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%' } ] ``` [サンプルコード](https://codepen.io/anon/pen/PvRorb) これも公式のものの引用にはなるのですが、リンクも貼り付けておきます。このボタン部分をクリックした時に、概要欄で述べた通り、`rowsPerPage`の値をページロード時の初期値に戻したいということを実現したいのです。 ###試したこと上記コードの通り、ボタンクリック時に、`rowsPerPage`の部分もクリックイベントによってクリックさせ値を変更しようと試みたのですが、うまく行かず、何らかの方法でボタンをクリックした時に`rowsPerPage`の値をページロード時の初期値に戻すことができないかと相談させていただいた経緯です。正直、できないなら出来ないで、ボタンクリック時にテーブル情報更新（ajax）後、ページをリロードして初期値に戻そうと思っているのですが、不本意な方法なので、ご相談だけでもと思いました。出来る出来ないといったご意見だけでも構いません。知見を拝借できますと幸いです。よろしくお願いします。

	@@ -1 +1 @@
1	- vuetiyのpaginateについて
1	+ vuetifyのpaginateについて

質問編集履歴