質問編集履歴
1
質問の訂正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
axiosでjsonを取得できたのですが、
|
body
CHANGED
|
@@ -1,75 +1,50 @@
|
|
|
1
|
-
|
|
1
|
+
axiosでjsonの取得はでき、①の箇所ではちゃんと配列として出力できるのに、②の箇所ではlengthが０の配列として出力されてしまいます。
|
|
2
|
-
```html
|
|
3
|
-
<div id="table" class="row">
|
|
4
|
-
<div v-for="item in filteredData" class="card" style="width: 20rem;">
|
|
5
|
-
<img class="card-img-top" src="noimage.jpg" alt="Card image cap">
|
|
6
|
-
<div class="card-body">
|
|
7
|
-
<h4>{{item.name}}</h4>
|
|
8
|
-
|
|
2
|
+
②の箇所までitemsのスコープを有効にするにはどこを修正すればよいでしょうか？
|
|
3
|
+
|
|
9
|
-
|
|
4
|
+
よろしくお願いします。
|
|
10
|
-
|
|
5
|
+
|
|
11
|
-
</div>
|
|
12
|
-
```
|
|
13
6
|
```js
|
|
14
|
-
//vuejs
|
|
15
|
-
var columnsData = {
|
|
16
|
-
colmuns: ['name','price','review','viral','regist'],
|
|
17
|
-
items:[
|
|
18
|
-
{name: "カレー",price:300,genre:"カレー"},
|
|
19
|
-
{name: "カツカレー",price:450,genre:"カレー"},
|
|
20
|
-
{name: "醤油ラーメン",price:300,genre:"麺"},
|
|
21
|
-
{name: "きつねうどん",price:300,genre:"麺"},
|
|
22
|
-
],
|
|
23
|
-
sortOrders : function(){
|
|
24
|
-
var sortOrder = {};
|
|
25
|
-
columnsData["colmuns"].forEach(function (key) {
|
|
26
|
-
sortOrder[key] = 1
|
|
27
|
-
})
|
|
28
|
-
return sortOrder;
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
7
|
new Vue({
|
|
32
|
-
el: '#
|
|
8
|
+
el: '#app',
|
|
33
|
-
//データの設定
|
|
34
9
|
data: {
|
|
35
|
-
colmuns: columnsData.colmuns, //項目
|
|
36
|
-
items:
|
|
10
|
+
items: []
|
|
37
|
-
sortKey : "", //ソート対象
|
|
38
|
-
sortOrders : columnsData.sortOrders(), //ソートの値
|
|
39
|
-
word: "" //検索テキスト
|
|
40
11
|
},
|
|
41
|
-
computed: { //dataの値が変更されるとfilteredDataが動作する
|
|
42
|
-
|
|
12
|
+
created: function () {
|
|
43
|
-
|
|
13
|
+
axios
|
|
44
|
-
var sortKey = this.sortKey;
|
|
45
|
-
|
|
14
|
+
.get('https://...(url).../test.json')
|
|
46
|
-
var order = this.sortOrders[sortKey] || 1;
|
|
47
|
-
//検索テキストがある場合
|
|
48
|
-
if (wordKey) {
|
|
49
|
-
|
|
15
|
+
.then(function (response) {
|
|
16
|
+
items = response.data;
|
|
50
|
-
|
|
17
|
+
console.log(items); //①ここでは表示できている
|
|
51
|
-
|
|
18
|
+
return items;
|
|
52
|
-
|
|
19
|
+
})
|
|
20
|
+
.catch(function (error) {
|
|
21
|
+
console.log(error);
|
|
53
|
-
|
|
22
|
+
});
|
|
54
|
-
}
|
|
55
|
-
//ソートが選択されている場合
|
|
56
|
-
if (sortKey) {
|
|
57
|
-
data = data.slice().sort(function (a, b) {
|
|
58
|
-
a = a[sortKey]
|
|
59
|
-
b = b[sortKey]
|
|
60
|
-
return (a === b ? 0 : a > b ? 1 : -1) * order
|
|
61
|
-
})
|
|
62
|
-
}
|
|
63
|
-
return data;
|
|
64
|
-
}
|
|
65
23
|
},
|
|
24
|
+
computed: {
|
|
25
|
+
eventedAction: function() {
|
|
26
|
+
console.log(this.items); //②ここではスコープが切れてlength 0
|
|
27
|
+
let list = this.items.slice();
|
|
28
|
+
|
|
29
|
+
return list;
|
|
30
|
+
}
|
|
31
|
+
},
|
|
66
|
-
|
|
32
|
+
methods: {
|
|
67
|
-
|
|
33
|
+
// sort用キーをセットし、昇順・降順を入れ替える
|
|
68
|
-
|
|
34
|
+
sortBy: function(key) {
|
|
35
|
+
this.sort.isAsc = this.sort.key === key ? !this.sort.isAsc : false;
|
|
69
|
-
|
|
36
|
+
this.sort.key = key;
|
|
70
|
-
this.sortOrders[key] = this.sortOrders[key] * -1;
|
|
71
|
-
|
|
37
|
+
},
|
|
38
|
+
sortedClass: function(key) {
|
|
39
|
+
return this.sort.key === key ? `sorted ${this.sort.isAsc ? 'asc' : 'desc' }` : '';
|
|
40
|
+
},
|
|
41
|
+
resetting: function() {
|
|
42
|
+
this.sort.key = '';
|
|
43
|
+
this.sort.isAsc = false;
|
|
44
|
+
this.selectCategory = categories;
|
|
45
|
+
this.searchName = '';
|
|
46
|
+
this.items = items;
|
|
72
47
|
}
|
|
48
|
+
}
|
|
73
49
|
});
|
|
74
|
-
|
|
75
50
|
```
|