vuetifyのpaginateについて

###概要
vuetifyの公式 paginate
こちらvuetifyの公式にあるpaginateなのですが、rowsPerPageの値を変更すると、現在の表示 of 最大表示件数の部分が自動的に変わります。
これはvuetifyのpaginateとしての仕様である挙動と思うのですが、やりたいこととして、とあるボタンをクリックした時にテーブルの情報が更新（ajax）される仕組みにはなるのですが、同時にrowsPerPageの値をページロード時の初期値に戻したい（同時に現在の表示 of 最大表示件数の部分も変わると思うのですが）という内容になります。

※初期値に戻したい。というのは、例えばページロード時、ページ送りをしていた場合、現在の表示 of 最大表示件数の部分が更新されます。ボタンをクリックしてテーブル情報を更新した場合、テーブルの表示は1件目からの表示になる作りにしているのですが、現在の表示 of 最大表示件数の部分が更新されずページ送りをした状態のまま表示されています。
これでは実際にテーブルに表示されているものと不一致になってしまうため、それを一致させたいという目的です。

###サンプルコード
サンプルではボタンクリック時テーブル情報の更新は行なっていません。

html
1<div id="app">
2  <button type="button" class="example-btn">クリック</button>
3  <v-app id="inspire" dark>
4    <div>
5      <v-data-table
6        must-sort
7        :headers="headers"
8        :pagination.sync="pagination"
9        :rows-per-page-items="pagination.rowsPerPageItems"
10        :total-items="pagination.totalItems"
11        :loading="loading"
12        :items="items"
13        class="elevation-1"
14      >
15        <template slot="items" slot-scope="props">
16          <td class="text-xs-left">{{ props.item.name }}</td>
17          <td class="text-xs-center">{{ props.item.calories }}</td>
18          <td class="text-xs-center">{{ props.item.fat }}</td>
19          <td class="text-xs-center">{{ props.item.carbs }}</td>
20          <td class="text-xs-center">{{ props.item.protein }}</td>
21          <td class="text-xs-center">{{ props.item.iron }}</td>
22        </template>
23      </v-data-table>
24    </div>
25  </v-app>
26</div>

css
1.example-btn {
2  padding: 10px;
3  margin: 10px;
4  width: 100px;
5  border: 1px solid #000;
6  border-radius: 5px;
7}
8[aria-label="Rows per page:"] {
9  font-weight: bold;
10}

javascript
1//
2// Vuex version of:
3// https://vuetifyjs.com/en/components/data-tables#example-server
4//
5
6// 試しにクリックイベントを仕掛けてみたが動かず...
7setTimeout(() => {
8  const rowsPerPageBtn = document.querySelector('[aria-label="Rows per page:"]');
9  const int = rowsPerPageBtn.querySelector('.input-group__input');
10  const num = rowsPerPageBtn.querySelector('.input-group__selections__comma');
11  console.log(int);
12  setTimeout(() => {
13    int.addEventListener('click', () => {
14      console.log('click');
15    }, false);
16  }, 1000);
17}, 1000);
18// ここまで
19
20var store = new Vuex.Store({
21  strict: true, 
22  state: {
23    pagination: {
24      descending: true,
25      page: 1,
26      rowsPerPage: 4,
27      sortBy: 'fat',
28      totalItems: 0,
29      rowsPerPageItems: [1, 2, 4, 8, 16]
30    },
31    items: []
32  },
33  mutations: {
34    setPagination (state, payload) {
35      state.pagination = payload
36    },
37    _setItems (state, { items, totalItems }) {
38      state.items = items
39      Vue.set(state.pagination, 'totalItems', totalItems)
40    }
41  },
42  actions: {
43    queryItems (context) {
44
45      return new Promise((resolve, reject) => {
46
47        const { sortBy, descending, page, rowsPerPage } = context.state.pagination
48
49        setTimeout(() => {
50
51          let items = _desserts.slice()
52          const totalItems = items.length
53
54          if (sortBy) {
55            items = items.sort((a, b) => {
56              const sortA = a[sortBy]
57              const sortB = b[sortBy]
58
59              if (descending) {
60                if (sortA < sortB) return 1
61                if (sortA > sortB) return -1
62                return 0
63              } else {
64                if (sortA < sortB) return -1
65                if (sortA > sortB) return 1
66                return 0
67              }
68            })
69          }
70
71          if (rowsPerPage > 0) {
72            items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
73          }
74
75          context.commit('_setItems', { items, totalItems })
76
77          resolve()
78        }, 1000)
79      })
80    }
81  },
82  getters: {
83    loading (state) {
84      return state.loading
85    },
86    pagination (state) {
87      return state.pagination
88    },
89    items (state) {
90      return state.items
91    }
92  }
93})
94
95new Vue({
96  el: '#app',
97  store,
98  data () {
99    return {
100      loading: false,
101      headers: [
102        {
103          text: 'Dessert (100g serving)',
104          align: 'left',
105          sortable: false,
106          value: 'name'
107        },
108        { text: 'Calories', value: 'calories', align: 'center' },
109        { text: 'Fat (g)', value: 'fat', align: 'center' },
110        { text: 'Carbs (g)', value: 'carbs', align: 'center' },
111        { text: 'Protein (g)', value: 'protein', align: 'center' },
112        { text: 'Iron (%)', value: 'iron', align: 'center' }
113      ]
114    }
115  },
116  watch: {
117    pagination: {
118      handler () {
119        this.loading = true
120        this.$store.dispatch('queryItems')
121          .then(result => {
122            this.loading = false
123          })
124      },
125      deep: true
126    }
127  },
128  computed: {
129    pagination: {
130      get: function () {
131        return this.$store.getters.pagination
132      },
133      set: function (value) {
134        this.$store.commit('setPagination', value)
135      }
136    },
137    items () {
138      return this.$store.getters.items
139    }
140  },
141  methods: {
142  }
143})
144
145const _desserts = [
146  {
147    value: false,
148    name: 'Frozen Yogurt',
149    calories: 159,
150    fat: 6.0,
151    carbs: 24,
152    protein: 4.0,
153    iron: '1%'
154  },
155  {
156    value: false,
157    name: 'Ice cream sandwich',
158    calories: 237,
159    fat: 9.0,
160    carbs: 37,
161    protein: 4.3,
162    iron: '1%'
163  },
164  {
165    value: false,
166    name: 'Eclair',
167    calories: 262,
168    fat: 16.0,
169    carbs: 23,
170    protein: 6.0,
171    iron: '7%'
172  },
173  {
174    value: false,
175    name: 'Cupcake',
176    calories: 305,
177    fat: 3.7,
178    carbs: 67,
179    protein: 4.3,
180    iron: '8%'
181  },
182  {
183    value: false,
184    name: 'Gingerbread',
185    calories: 356,
186    fat: 16.0,
187    carbs: 49,
188    protein: 3.9,
189    iron: '16%'
190  },
191  {
192    value: false,
193    name: 'Jelly bean',
194    calories: 375,
195    fat: 0.0,
196    carbs: 94,
197    protein: 0.0,
198    iron: '0%'
199  },
200  {
201    value: false,
202    name: 'Lollipop',
203    calories: 392,
204    fat: 0.2,
205    carbs: 98,
206    protein: 0,
207    iron: '2%'
208  },
209  {
210    value: false,
211    name: 'Honeycomb',
212    calories: 408,
213    fat: 3.2,
214    carbs: 87,
215    protein: 6.5,
216    iron: '45%'
217  },
218  {
219    value: false,
220    name: 'Donut',
221    calories: 452,
222    fat: 25.0,
223    carbs: 51,
224    protein: 4.9,
225    iron: '22%'
226  },
227  {
228    value: false,
229    name: 'KitKat',
230    calories: 518,
231    fat: 26.0,
232    carbs: 65,
233    protein: 7,
234    iron: '6%'
235  }
236]

サンプルコード
これも公式のものの引用にはなるのですが、リンクも貼り付けておきます。
このボタン部分をクリックした時に、概要欄で述べた通り、rowsPerPageの値をページロード時の初期値に戻したいということを実現したいのです。

###試したこと
上記コードの通り、ボタンクリック時に、rowsPerPageの部分もクリックイベントによってクリックさせ値を変更しようと試みたのですが、うまく行かず、何らかの方法でボタンをクリックした時にrowsPerPageの値をページロード時の初期値に戻すことができないかと相談させていただいた経緯です。

正直、できないなら出来ないで、ボタンクリック時にテーブル情報更新（ajax）後、ページをリロードして初期値に戻そうと思っているのですが、不本意な方法なので、ご相談だけでもと思いました。

出来る出来ないといったご意見だけでも構いません。
知見を拝借できますと幸いです。
よろしくお願いします。

yasutomi

2019/05/24 03:54

vuetiyではなくvuetifyなので質問タイトルの修正をお願いします。

souta-haruran

2019/05/24 05:11

失礼しました。修正しておきました。

行動規範の内容に同意します

回答1件

ベストアンサー

button要素に@click="method()"のような処理を入れるべきでは？
コードを見る限りボタンがおいてあるだけに見えます。他のところで何かしらバインドしてあるのでしょうか？

methodsにとしてハンドラを定義し、setPagination()を適切に叩けば動きそうな気はします。

投稿2019/05/25 03:18

otolab

総合スコア765

souta-haruran

2019/05/27 00:31

ありがとうございます。参考にさせていただきながら見直し実装進めてみたいと思います。

otolab

2019/05/27 02:12

> 上記コードの通り、ボタンクリック時に、rowsPerPageの部分もクリックイベントによってクリックさせ値を変更しようと試みたのですが、うまく行かず、ボタンが設置されているだけだとすれば、上記の文章は不適切です。「動くはずのコードが動かない」のと「どう書けば何を調べればいいかアドバイスが欲しい」のでは回答者の心積もりがまったく異なります。（余分な労力がかかります）今回の場合は「ボタンを設置するところまではできたが、次にどうすればよいのか分からない」という書き方のほうが適切のように思われます。回答者は良い質問者を求めてますので、次回はよろしくおねがいします。

souta-haruran

2019/05/27 07:18

以後注意します。

行動規範の内容に同意します