teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問axiosでjsonを取得できたのですが、

編集履歴

質問編集履歴

1

質問の訂正

2019/03/31 17:31

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 配列をaxiosを使ってjsonで読み込みたい
1
+ axiosでjsonを取得できたのですが、
test CHANGED
@@ -1,149 +1,99 @@
1
- 現在jsのなかに配列を直接書いていますが、axiosを使って外部のJsonから読み込みたいです。
1
+ axiosでjsonの取得はでき、①の箇所ではちゃんと配列として出力できるのに、②の箇所ではlengthが０の配列として出力されてしまいます。
2
2
 
3
- ```html
3
+ ②の箇所までitemsのスコープを有効にするにはどこを修正すればよいでしょうか？
4
4
 
5
- <div id="table" class="row">
6
5
 
7
- <div v-for="item in filteredData" class="card" style="width: 20rem;">
8
6
 
9
- <img class="card-img-top" src="noimage.jpg" alt="Card image cap">
7
+ よろしくお願いします。
10
8
 
11
- <div class="card-body">
12
9
 
13
- <h4>{{item.name}}</h4>
14
-
15
- <p>¥ {{item.price}}</p>
16
-
17
- </div>
18
-
19
- </div>
20
-
21
- </div>
22
-
23
- ```
24
10
 
25
11
  ```js
26
12
 
27
- //vuejs
13
+ new Vue({
28
14
 
29
- var columnsData = {
15
+ el: '#app',
30
16
 
31
- colmuns: ['name','price','review','viral','regist'],
17
+ data: {
32
18
 
33
- items:[
19
+ items: []
34
20
 
35
- {name: "カレー",price:300,genre:"カレー"},
21
+ },
36
22
 
37
- {name: "カツカレー",price:450,genre:"カレー"},
23
+ created: function () {
38
24
 
39
- {name: "醤油ラーメン",price:300,genre:"麺"},
25
+ axios
40
26
 
41
- {name: "きつねうどん",price:300,genre:"麺"},
27
+ .get('https://...(url).../test.json')
42
28
 
43
- ],
29
+ .then(function (response) {
44
30
 
45
- sortOrders : function(){
31
+ items = response.data;
46
32
 
47
- var sortOrder = {};
33
+ console.log(items); //①ここでは表示できている
48
34
 
49
- columnsData["colmuns"].forEach(function (key) {
35
+ return items;
50
36
 
51
- sortOrder[key] = 1
37
+ })
52
38
 
53
- })
39
+ .catch(function (error) {
54
40
 
41
+ console.log(error);
42
+
43
+ });
44
+
45
+ },
46
+
47
+ computed: {
48
+
49
+ eventedAction: function() {
50
+
51
+ console.log(this.items); //②ここではスコープが切れてlength 0
52
+
53
+ let list = this.items.slice();
54
+
55
+
56
+
55
- return sortOrder;
57
+ return list;
58
+
59
+ }
60
+
61
+ },
62
+
63
+ methods: {
64
+
65
+ // sort用キーをセットし、昇順・降順を入れ替える
66
+
67
+ sortBy: function(key) {
68
+
69
+ this.sort.isAsc = this.sort.key === key ? !this.sort.isAsc : false;
70
+
71
+ this.sort.key = key;
72
+
73
+ },
74
+
75
+ sortedClass: function(key) {
76
+
77
+ return this.sort.key === key ? `sorted ${this.sort.isAsc ? 'asc' : 'desc' }` : '';
78
+
79
+ },
80
+
81
+ resetting: function() {
82
+
83
+ this.sort.key = '';
84
+
85
+ this.sort.isAsc = false;
86
+
87
+ this.selectCategory = categories;
88
+
89
+ this.searchName = '';
90
+
91
+ this.items = items;
56
92
 
57
93
  }
58
94
 
59
- };
60
-
61
- new Vue({
62
-
63
- el: '#sort',
64
-
65
- //データの設定
66
-
67
- data: {
68
-
69
- colmuns: columnsData.colmuns, //項目
70
-
71
- items:columnsData.items, //項目のデータ
72
-
73
- sortKey : "", //ソート対象
74
-
75
- sortOrders : columnsData.sortOrders(), //ソートの値
76
-
77
- word: "" //検索テキスト
78
-
79
- },
80
-
81
- computed: { //dataの値が変更されるとfilteredDataが動作する
82
-
83
- filteredData: function(){
84
-
85
- var data = this.items;
86
-
87
- var sortKey = this.sortKey;
88
-
89
- var wordKey = this.word && this.word.toLowerCase();
90
-
91
- var order = this.sortOrders[sortKey] || 1;
92
-
93
- //検索テキストがある場合
94
-
95
- if (wordKey) {
96
-
97
- data = data.filter(function (row) {
98
-
99
- return Object.keys(row).some(function (key) {
100
-
101
- return String(row[key]).toLowerCase().indexOf(wordKey) > -1
102
-
103
- })
104
-
105
- })
106
-
107
- }
95
+ }
108
-
109
- //ソートが選択されている場合
110
-
111
- if (sortKey) {
112
-
113
- data = data.slice().sort(function (a, b) {
114
-
115
- a = a[sortKey]
116
-
117
- b = b[sortKey]
118
-
119
- return (a === b ? 0 : a > b ? 1 : -1) * order
120
-
121
- })
122
-
123
- }
124
-
125
- return data;
126
-
127
- }
128
-
129
- },
130
-
131
- methods: {
132
-
133
- //ソート対象、ソートの値を変更する
134
-
135
- sortBy: function (key) {
136
-
137
- this.sortKey = key;
138
-
139
- this.sortOrders[key] = this.sortOrders[key] * -1;
140
-
141
- }
142
-
143
- }
144
96
 
145
97
  });
146
98
 
147
-
148
-
149
99
  ```