質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

2回答

1403閲覧

vuejs-paginateコンポーネントのdataを親コンポーネント側から更新したい。

redux

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2020/09/03 10:22

編集2020/09/03 14:17

現在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

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

解決方法を見い出せないので手作りすることにしました。

投稿2020/09/05 10:49

redux

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

jQueryで無理やり属性値を変えてもだめでした。
調べていく中でpaginateコンポーネントの中にあるinnerValueというdataが、ペジネーションのactiveやクリックイベントと紐づいている事が判明したので、この値も初期化できればいけそうだと判明しましたが、具体的な方法がわからず詰まっています。

投稿2020/09/03 13:35

編集2020/09/03 14:05
redux

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問