質問編集履歴
3
目標を変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
vuejs-paginateの
|
|
1
|
+
vuejs-paginateコンポーネントのdataを親コンポーネント側から更新したい。
|
body
CHANGED
|
@@ -1,28 +1,19 @@
|
|
|
1
1
|
現在vuejs-paginateを使ってページングをしたページを作成しています。
|
|
2
|
-
DBから連想配列を持ってきてページ毎に表示しています。
|
|
2
|
+
DBから連想配列を持ってきて1ページ毎に９個の要素を表示しています。
|
|
3
3
|
|
|
4
4
|
ここに追加機能としてカテゴリを選択すると条件に当てはまる連想配列だけを表示する機能を実装しました。
|
|
5
|
+
ラジオボタンでcategory変数の値を変動させ、それに対応する配列要素のみ表示する仕組みです。
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
このcategoryを変数を変更した際に、ページを１ページに巻き戻す処理を実装したいのですが、その為には子コンポーネントとして呼び出しているvuejs-paginateコンポーネントのdataのinnerValueを１に設定する処理を挟めば実現できることが判明しました。
|
|
7
8
|
|
|
8
|
-
例えば...
|
|
9
|
-
全表示時 ： 合計１０ページ
|
|
10
|
-
絞り込み時 ： 合計５ページ
|
|
11
|
-
この
|
|
9
|
+
このvuejs-paginateコンポーネントはライブラリのため、子コンポーネント側のpropsの値などを編集する事ができません。
|
|
10
|
+
親コンポーネント側から、dataを更新する事は可能でしょうか。
|
|
12
11
|
|
|
13
|
-
これを回避するため、カテゴリの選択要素をwatchして、変更時にcurrentPageを1に設定しなおす修正をしました。
|
|
14
|
-
これにより、上記の問題は回避されましたが、新たな問題が発生しました。それが表題の問題です。
|
|
15
|
-
|
|
16
|
-
以下の動作をすると不具合が置きます。
|
|
17
|
-
全表示状態で２ページ目を表示 → 絞り込みをする → 絞り込まれた状態で１ページ目が表示 → ２ページ目をクリックする（動作しない） → ２ページ目以外をクリックする（ページ遷移）
|
|
18
|
-
|
|
19
|
-
この動作の原因は、currentPageを１にすることでページは巻き戻るものの依然として２ページ目にactive属性がついているため、ペジネーションのクリックイベントが無効化されることが原因でした。
|
|
20
|
-
そのためカテゴリー変更時に、active属性を１の値をもつli要素に移したいです。（下から２番目の画像参照）
|
|
21
|
-
|
|
22
|
-
スマートな解決方法をご教授いただきたいです。
|
|
23
|
-
|
|
24
12
|
```pagenate
|
|
13
|
+
<script src="https://unpkg.com/vuejs-paginate@latest"></script>
|
|
14
|
+
<script>Vue.component('paginate', VuejsPaginate)</script>
|
|
25
15
|
|
|
16
|
+
//親コンポーネント内での呼び出し部分
|
|
26
17
|
<paginate
|
|
27
18
|
:page-count="getPageCount"
|
|
28
19
|
:page-range="3"
|
|
@@ -39,7 +30,6 @@
|
|
|
39
30
|
```js
|
|
40
31
|
data: function() {
|
|
41
32
|
return {
|
|
42
|
-
"items" : //ページングされる連想配列が入る。
|
|
43
33
|
"parPage": 9,
|
|
44
34
|
"currentPage": 1,
|
|
45
35
|
"category" : ''
|
|
@@ -52,16 +42,8 @@
|
|
|
52
42
|
},
|
|
53
43
|
computed: {
|
|
54
44
|
getPageCount: function() {
|
|
55
|
-
return Math.ceil(this.
|
|
45
|
+
return Math.ceil(this.items.length / this.parPage);
|
|
56
46
|
},
|
|
57
|
-
narrow_down: function() {
|
|
58
|
-
if(this.category) {
|
|
59
|
-
return this.items.filter(function (el) {
|
|
60
|
-
return el.category == this.category
|
|
61
|
-
}, this)
|
|
62
|
-
}
|
|
63
|
-
return this.items
|
|
64
|
-
}
|
|
65
47
|
},
|
|
66
48
|
watch:{
|
|
67
49
|
category: function(){
|
|
@@ -70,5 +52,4 @@
|
|
|
70
52
|
}
|
|
71
53
|
|
|
72
54
|
```
|
|
73
|
-
|
|
74
55
|
|
2
画像追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
全表示状態で２ページ目を表示 → 絞り込みをする → 絞り込まれた状態で１ページ目が表示 → ２ページ目をクリックする（動作しない） → ２ページ目以外をクリックする（ページ遷移）
|
|
18
18
|
|
|
19
19
|
この動作の原因は、currentPageを１にすることでページは巻き戻るものの依然として２ページ目にactive属性がついているため、ペジネーションのクリックイベントが無効化されることが原因でした。
|
|
20
|
-
そのためカテゴリー変更時に、active属性を１の値をもつli要素に移したいです。（下
|
|
20
|
+
そのためカテゴリー変更時に、active属性を１の値をもつli要素に移したいです。（下から２番目の画像参照）
|
|
21
21
|
|
|
22
22
|
スマートな解決方法をご教授いただきたいです。
|
|
23
23
|
|
|
@@ -70,4 +70,5 @@
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
```
|
|
73
|
-
|
|
73
|
+
|
|
74
|
+
|
1
画像添付
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
全表示状態で２ページ目を表示 → 絞り込みをする → 絞り込まれた状態で１ページ目が表示 → ２ページ目をクリックする（動作しない） → ２ページ目以外をクリックする（ページ遷移）
|
|
18
18
|
|
|
19
19
|
この動作の原因は、currentPageを１にすることでページは巻き戻るものの依然として２ページ目にactive属性がついているため、ペジネーションのクリックイベントが無効化されることが原因でした。
|
|
20
|
-
そのためカテゴリー変更時に、active属性
|
|
20
|
+
そのためカテゴリー変更時に、active属性を１の値をもつli要素に移したいです。（下記画像参照）
|
|
21
21
|
|
|
22
22
|
スマートな解決方法をご教授いただきたいです。
|
|
23
23
|
|
|
@@ -69,4 +69,5 @@
|
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
```
|
|
72
|
+
```
|
|
73
|
+
|