質問編集履歴

3

目標を変更

2020/09/03 14:17

投稿

redux
redux

スコア19

test CHANGED
@@ -1 +1 @@
1
- vuejs-paginateのactive属性をコントロールする
1
+ vuejs-paginateコンポーネントdataコンポーネン側から更新したい
test CHANGED
@@ -1,52 +1,34 @@
1
1
  現在vuejs-paginateを使ってページングをしたページを作成しています。
2
2
 
3
- DBから連想配列を持ってきてページ毎に表示しています。
3
+ DBから連想配列を持ってきて1ページ毎に9個の要素を表示しています。
4
4
 
5
5
 
6
6
 
7
7
  ここに追加機能としてカテゴリを選択すると条件に当てはまる連想配列だけを表示する機能を実装しました。
8
8
 
9
-
10
-
11
- 結果としてカテゴリ当てはま物だけを表示はしてくれですが、ページ番号を引き継いでしまいます
9
+ ラジオボタンでcategory変数の値を変動させ、それ対応す配列要素のみ表示仕組みです。
12
10
 
13
11
 
14
12
 
15
- 例えば...
16
-
17
- 全表示時  : 合計10ページ
18
-
19
- 絞り込み時 : 合計5ページ
20
-
21
- この条件の時全表示状態で10ページ表示 → 絞り込みをすると、絞り込んだ上で、ページ目のページ番号引き継いでしまうため画面グ以外表示されなくなります。このまま、合計5個表示されジ番号どれかクリック正常に動作しま
13
+ このcategoryを変数を変更した際に、ページを1ページに巻き戻す処理実装したすがその為は子コンポトとして呼び出していvuejs-paginateコンポネントdataのinnerValue1に設定る処理を挟め実現できることが判明しました
22
14
 
23
15
 
24
16
 
25
- れを回避するため、カテゴリ選択要素をwatchして、変更時にcurrentPageを1に設定しなお修正をしした
17
+ このvuejs-paginateコンポーネントはライブラリのため、子コンポーネント側のpropsの値など編集る事ができせん
26
18
 
27
- これにより、上記の問題は回避されましたが、新たな問題が発生しました。それが表題の問題です。
28
-
29
-
30
-
31
- 以下の動作をすると不具合が置きます。
32
-
33
- 全表示状態で2ページ目を表示 → 絞り込みをする → 絞り込まれた状態で1ページ目が表示 → 2ページ目をクリックする(動作しない) → 2ページ目以外をクリックする(ページ遷移)
34
-
35
-
36
-
37
- この動作の原因は、currentPageを1にすることでページは巻き戻るものの依然として2ページ目にactive属性がついているため、ペジネーションのクリックイベントが無効化されることが原因でした。
38
-
39
- そのためカテゴリー変更時に、active属性を1の値をもつli要素に移したいです。(下から2番目の画像参照)
40
-
41
-
42
-
43
- スマートな解決方法ご教授いただきたい
19
+ 親コンポネン側から、data更新する事は可能しょうか
44
20
 
45
21
 
46
22
 
47
23
  ```pagenate
48
24
 
25
+ <script src="https://unpkg.com/vuejs-paginate@latest"></script>
49
26
 
27
+ <script>Vue.component('paginate', VuejsPaginate)</script>
28
+
29
+
30
+
31
+   //親コンポーネント内での呼び出し部分
50
32
 
51
33
  <paginate
52
34
 
@@ -80,8 +62,6 @@
80
62
 
81
63
  return {
82
64
 
83
-      "items" : //ページングされる連想配列が入る。
84
-
85
65
  "parPage": 9,
86
66
 
87
67
  "currentPage": 1,
@@ -106,25 +86,9 @@
106
86
 
107
87
  getPageCount: function() {
108
88
 
109
- return Math.ceil(this.narrow_down.length / this.parPage);
89
+ return Math.ceil(this.items.length / this.parPage);
110
90
 
111
91
  },
112
-
113
- narrow_down: function() {
114
-
115
- if(this.category) {
116
-
117
- return this.items.filter(function (el) {
118
-
119
- return el.category == this.category
120
-
121
- }, this)
122
-
123
- }
124
-
125
- return this.items
126
-
127
- }
128
92
 
129
93
  },
130
94
 
@@ -142,6 +106,4 @@
142
106
 
143
107
  ```
144
108
 
145
- ![イメージ説明](d41549ebbf8d2a728534ea1f70582eeb.png)
146
-
147
109
  ![イメージ説明](b7f3776571eb656f570d5fc827f1e2ed.png)

2

画像追加

2020/09/03 14:17

投稿

redux
redux

スコア19

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  この動作の原因は、currentPageを1にすることでページは巻き戻るものの依然として2ページ目にactive属性がついているため、ペジネーションのクリックイベントが無効化されることが原因でした。
38
38
 
39
- そのためカテゴリー変更時に、active属性を1の値をもつli要素に移したいです。(下画像参照)
39
+ そのためカテゴリー変更時に、active属性を1の値をもつli要素に移したいです。(下から2番目の画像参照)
40
40
 
41
41
 
42
42
 
@@ -143,3 +143,5 @@
143
143
  ```
144
144
 
145
145
  ![イメージ説明](d41549ebbf8d2a728534ea1f70582eeb.png)
146
+
147
+ ![イメージ説明](b7f3776571eb656f570d5fc827f1e2ed.png)

1

画像添付

2020/09/03 13:33

投稿

redux
redux

スコア19

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  この動作の原因は、currentPageを1にすることでページは巻き戻るものの依然として2ページ目にactive属性がついているため、ペジネーションのクリックイベントが無効化されることが原因でした。
38
38
 
39
- そのためカテゴリー変更時に、active属性も1ぺージ目に移動するように修正したいです。
39
+ そのためカテゴリー変更時に、active属性を1の値をつli要素に移したいです。(下記画像参照)
40
40
 
41
41
 
42
42
 
@@ -141,3 +141,5 @@
141
141
 
142
142
 
143
143
  ```
144
+
145
+ ![イメージ説明](d41549ebbf8d2a728534ea1f70582eeb.png)