現在vuejs-paginateを使ってページングをしたページを作成しています。
DBから連想配列を持ってきて1ページ毎に9個の要素を表示しています。
ここに追加機能としてカテゴリを選択すると条件に当てはまる連想配列だけを表示する機能を実装しました。
ラジオボタンでcategory変数の値を変動させ、それに対応する配列要素のみ表示する仕組みです。
このcategoryを変数を変更した際に、ページを1ページに巻き戻す処理を実装したいのですが、その為には子コンポーネントとして呼び出しているvuejs-paginateコンポーネントのdataのinnerValueを1に設定する処理を挟めば実現できることが判明しました。
このvuejs-paginateコンポーネントはライブラリのため、子コンポーネント側のpropsの値などを編集する事ができません。
親コンポーネント側から、dataを更新する事は可能でしょうか。
pagenate
1 <script src="https://unpkg.com/vuejs-paginate@latest"></script> 2 <script>Vue.component('paginate', VuejsPaginate)</script> 3 4 //親コンポーネント内での呼び出し部分 5 <paginate 6 :page-count="getPageCount" 7 :page-range="3" 8 :margin-pages="2" 9 :click-handler="clickCallback" 10 :prev-text="'<'" 11 :next-text="'>'" 12 :container-class="'pagination'" 13 :page-class="'page-item'" 14 class="paginate"> 15 </paginate>
js
1 data: function() { 2 return { 3 "parPage": 9, 4 "currentPage": 1, 5 "category" : '' 6 } 7 }, 8 methods: { 9 clickCallback: function (pageNum) { 10 this.currentPage = Number(pageNum); 11 }, 12 }, 13 computed: { 14 getPageCount: function() { 15 return Math.ceil(this.items.length / this.parPage); 16 }, 17 }, 18 watch:{ 19 category: function(){ 20 this.currentPage = 1 21 } 22 } 23
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。