axiosでjsonを取得できたのですが、

axiosでjsonの取得はでき、①の箇所ではちゃんと配列として出力できるのに、②の箇所ではlengthが０の配列として出力されてしまいます。
②の箇所までitemsのスコープを有効にするにはどこを修正すればよいでしょうか？

よろしくお願いします。

js
1new Vue({
2  el: '#app',
3  data: {
4    items: []
5  },
6  created: function () {
7    axios
8      .get('https://...(url).../test.json')
9      .then(function (response) {
10      items = response.data;
11      console.log(items); //①ここでは表示できている
12      return items;
13    })
14    .catch(function (error) {
15      console.log(error);
16    });
17  },
18  computed: {
19    eventedAction: function() {
20      console.log(this.items); //②ここではスコープが切れてlength 0
21      let list = this.items.slice();
22
23  return list;
24}
25},
26methods: {
27  // sort用キーをセットし、昇順・降順を入れ替える
28  sortBy: function(key) {
29    this.sort.isAsc = this.sort.key === key ? !this.sort.isAsc : false;
30    this.sort.key = key;
31  },
32  sortedClass: function(key) {
33    return this.sort.key === key ? `sorted ${this.sort.isAsc ? 'asc' : 'desc' }` : '';
34  },
35  resetting: function() {
36    this.sort.key = '';
37    this.sort.isAsc = false;
38    this.selectCategory = categories;
39    this.searchName = '';
40    this.items = items;
41  }
42}
43});

行動規範の内容に同意します

回答1件

ベストアンサー

items に入れればよいのでは。

js
1new Vue({
2	  el: '#app'
3	, data: {
4		items: []
5	}
6	, created: function() {
7		axios
8			.get('https://...(url).../test.json')
9			.then( response=> ( this.items = response.data ))
10			.catch(function(error) {
11				console.log(error);
12			});
13	}
14	, computed: {
15		eventedAction: function() {
16			console.log(this.items); //②ここではスコープが切れてlength 0
17			let list = this.items.slice();
18
19			return list;
20		}
21	}
22});