質問編集履歴
3
目標を変更
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
vuejs-paginateのa
|
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
|
-
この
|
13
|
+
このcategoryを変数を変更した際に、ページを1ページに巻き戻す処理を実装したいのですが、その為には子コンポーネントとして呼び出しているvuejs-paginateコンポーネントのdataのinnerValueを1に設定する処理を挟めば実現できることが判明しました。
|
22
14
|
|
23
15
|
|
24
16
|
|
25
|
-
こ
|
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.
|
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
画像追加
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
画像添付
test
CHANGED
File without changes
|
test
CHANGED
@@ -36,7 +36,7 @@
|
|
36
36
|
|
37
37
|
この動作の原因は、currentPageを1にすることでページは巻き戻るものの依然として2ページ目にactive属性がついているため、ペジネーションのクリックイベントが無効化されることが原因でした。
|
38
38
|
|
39
|
-
そのためカテゴリー変更時に、active属性も
|
39
|
+
そのためカテゴリー変更時に、active属性を1の値をもつli要素に移したいです。(下記画像参照)
|
40
40
|
|
41
41
|
|
42
42
|
|
@@ -141,3 +141,5 @@
|
|
141
141
|
|
142
142
|
|
143
143
|
```
|
144
|
+
|
145
|
+
![イメージ説明](d41549ebbf8d2a728534ea1f70582eeb.png)
|