質問編集履歴
3
タイトルの変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Vuejsで配列のデータを絞り込みたい
|
|
1
|
+
Vuejsで配列のデータをジャンルごとに絞り込みたい
|
test
CHANGED
|
File without changes
|
2
タイトルの変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Vuejsで
|
|
1
|
+
Vuejsで配列のデータを絞り込みたい
|
test
CHANGED
|
File without changes
|
1
内容変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Vue
|
|
1
|
+
VuejsでJsonのデータを絞り込みたい
|
test
CHANGED
|
@@ -1,44 +1,46 @@
|
|
|
1
1
|
### やりたいこと
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
チェックボックスでジャンルごとに絞り込みたい (OR検索)
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
### 現在のコード
|
|
8
8
|
|
|
9
|
-
```
|
|
9
|
+
```html
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
<div id="sort">
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
<p>検索： <input type="text" name="query" v-model="word"></p>
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
<div id="genre">
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
<input type="checkbox">麺類
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
<input type="checkbox">カレー
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
</div>
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
</div>
|
|
24
24
|
|
|
25
|
-
"price": 2600
|
|
26
25
|
|
|
27
|
-
},{
|
|
28
26
|
|
|
29
|
-
|
|
27
|
+
<div id="table" class="row">
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
<div v-for="item in filteredData" class="card" style="width: 20rem;">
|
|
32
30
|
|
|
33
|
-
|
|
31
|
+
<img class="card-img-top" src="noimage.jpg" alt="Card image cap">
|
|
34
32
|
|
|
35
|
-
|
|
33
|
+
<div class="card-body">
|
|
36
34
|
|
|
37
|
-
|
|
35
|
+
<h4>{{item.name}}</h4>
|
|
38
36
|
|
|
39
|
-
}
|
|
37
|
+
<p>¥ {{item.price}}</p>
|
|
40
38
|
|
|
41
|
-
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
</div>
|
|
42
44
|
|
|
43
45
|
```
|
|
44
46
|
|
|
@@ -46,61 +48,129 @@
|
|
|
46
48
|
|
|
47
49
|
//src.js
|
|
48
50
|
|
|
49
|
-
|
|
51
|
+
var columnsData = {
|
|
50
52
|
|
|
51
|
-
|
|
53
|
+
colmuns: ['name','price','genre'],
|
|
52
54
|
|
|
53
|
-
|
|
55
|
+
items:[
|
|
54
56
|
|
|
57
|
+
{name: "カレー",price:300,genre:"カレー"},
|
|
58
|
+
|
|
59
|
+
{name: "カツカレー",price:450,genre:"カレー"},
|
|
60
|
+
|
|
61
|
+
{name: "醤油ラーメン",price:300,genre:"麺"},
|
|
62
|
+
|
|
63
|
+
{name: "きつねうどん",price:300,genre:"麺"},
|
|
64
|
+
|
|
65
|
+
],
|
|
66
|
+
|
|
67
|
+
sortOrders : function(){
|
|
68
|
+
|
|
69
|
+
var sortOrder = {};
|
|
70
|
+
|
|
71
|
+
columnsData["colmuns"].forEach(function (key) {
|
|
72
|
+
|
|
73
|
+
sortOrder[key] = 1
|
|
74
|
+
|
|
75
|
+
})
|
|
76
|
+
|
|
77
|
+
return sortOrder;
|
|
78
|
+
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
new Vue({
|
|
84
|
+
|
|
85
|
+
el: '#sort',
|
|
86
|
+
|
|
87
|
+
//データの設定
|
|
88
|
+
|
|
55
|
-
|
|
89
|
+
data: {
|
|
90
|
+
|
|
91
|
+
colmuns: columnsData.colmuns, //項目
|
|
92
|
+
|
|
93
|
+
items:columnsData.items, //項目のデータ
|
|
94
|
+
|
|
95
|
+
sortKey : "", //ソート対象
|
|
96
|
+
|
|
97
|
+
sortOrders : columnsData.sortOrders(), //ソートの値
|
|
98
|
+
|
|
99
|
+
word: "" //検索テキスト
|
|
100
|
+
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
computed: { //dataの値が変更されるとfilteredDataが動作する
|
|
104
|
+
|
|
105
|
+
filteredData: function(){
|
|
106
|
+
|
|
107
|
+
var data = this.items;
|
|
108
|
+
|
|
109
|
+
var sortKey = this.sortKey;
|
|
110
|
+
|
|
111
|
+
var wordKey = this.word && this.word.toLowerCase();
|
|
112
|
+
|
|
113
|
+
var order = this.sortOrders[sortKey] || 1;
|
|
114
|
+
|
|
115
|
+
//検索テキストがある場合
|
|
116
|
+
|
|
117
|
+
if (wordKey) {
|
|
118
|
+
|
|
119
|
+
data = data.filter(function (row) {
|
|
120
|
+
|
|
121
|
+
return Object.keys(row).some(function (key) {
|
|
122
|
+
|
|
123
|
+
return String(row[key]).toLowerCase().indexOf(wordKey) > -1
|
|
124
|
+
|
|
125
|
+
})
|
|
126
|
+
|
|
127
|
+
})
|
|
128
|
+
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
//ソートが選択されている場合
|
|
132
|
+
|
|
133
|
+
if (sortKey) {
|
|
134
|
+
|
|
135
|
+
data = data.slice().sort(function (a, b) {
|
|
136
|
+
|
|
137
|
+
a = a[sortKey]
|
|
138
|
+
|
|
139
|
+
b = b[sortKey]
|
|
140
|
+
|
|
141
|
+
return (a === b ? 0 : a > b ? 1 : -1) * order
|
|
142
|
+
|
|
143
|
+
})
|
|
144
|
+
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
return data;
|
|
56
148
|
|
|
57
149
|
}
|
|
58
150
|
|
|
59
151
|
},
|
|
60
152
|
|
|
61
|
-
mo
|
|
153
|
+
methods: {
|
|
62
154
|
|
|
63
|
-
|
|
155
|
+
//ソート対象、ソートの値を変更する
|
|
64
156
|
|
|
65
|
-
|
|
157
|
+
sortBy: function (key) {
|
|
66
158
|
|
|
67
|
-
|
|
159
|
+
this.sortKey = key;
|
|
68
160
|
|
|
69
|
-
.t
|
|
161
|
+
this.sortOrders[key] = this.sortOrders[key] * -1;
|
|
70
162
|
|
|
71
|
-
|
|
163
|
+
}
|
|
72
164
|
|
|
73
|
-
|
|
165
|
+
}
|
|
74
166
|
|
|
75
|
-
|
|
167
|
+
});
|
|
76
168
|
|
|
77
|
-
template: '<table class="row">' +
|
|
78
169
|
|
|
79
|
-
'<tr v-for="item in items" class="card" style="width: 20rem;">' +
|
|
80
|
-
|
|
81
|
-
'<img class="card-img-top" src="..." alt="Card image cap">'+
|
|
82
|
-
|
|
83
|
-
'<div class="card-body">'+
|
|
84
|
-
|
|
85
|
-
'<h4 class="card-title">{{ item.title }}</h4>'+
|
|
86
|
-
|
|
87
|
-
'<p class="card-text">{{ item.price }}</p>'+
|
|
88
|
-
|
|
89
|
-
'</tr></table>'
|
|
90
|
-
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
);
|
|
94
170
|
|
|
95
171
|
```
|
|
96
172
|
|
|
97
|
-
### やりたいこと(詳細)
|
|
98
173
|
|
|
99
|
-
0. テキストボックスに入力された内容が含まれるデータのみでテーブルを再生成(リアルタイム)
|
|
100
|
-
|
|
101
|
-
0. チェックボックスの内容でテーブル再生成
|
|
102
|
-
|
|
103
|
-
0. 価格や名称でソートして再生成
|
|
104
174
|
|
|
105
175
|
|
|
106
176
|
|