vue.jsでfilterを用いて特定のデータを抽出したい

いつもお世話になります。
Vue.jsでaxiosを使ってJsonを取得し、Filter機能を使って表示させたいです。
サンプルをいじって学習しているのですが
TypeError: this.fulllist.filter is not a function
と表示されてしまい困っております。
ご教授のほどよろしくお願いします。

参考ししたもの

https://codepen.io/tremendusapps/pen/RRGwbQ?editors=1010

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Vue.js App</title>
6  <link href="main.css" rel="stylesheet">
7</head>
8<body>
9  <div id="app">
10  <ul>
11    <li v-for="(item, index) in list" v-bind:key="item.id">
12      ID.{{ item.id }} {{ item.name }} HP.{{ item.hp }}
13    </li>
14  </ul>
15</div>
16  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
17  <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
18  <script src="main.js"></script>
19</body>
20</html>

main.js
1new Vue({
2  el: '#app',
3  data: {
4    // あらかじめ空リストを用意しておく
5    fulllist: []
6  },
7  created: function () {
8    axios.get('list.json').then(function (response) {
9      this.fulllist = response.data
10    }.bind(this)).catch(function (e) {
11      console.error(e)
12    })
13  },
14  computed: {
15    list: function() {
16      return this.fulllist.filter(function(i) {
17        console.log(i)
18        return i.name === 'スライム'
19      })
20    }
21  },
22})

[
  { "id": 1, "name": "スライム", "hp": 100 },
  { "id": 2, "name": "ゴブリン", "hp": 200 },
  { "id": 3, "name": "ドラゴン", "hp": 500 },
]

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

回答1件

コード的に怪しいところはいまいち見えないのですが、エラー的にはthis.fulllistがArray以外になっているように見えます。

念の為以下のようにconsoleをいれて、axiosの戻り値等がArrayなのかを見てもいいかもしれません。

new Vue({
  el: '#app',
  data: {
    // あらかじめ空リストを用意しておく
    fulllist: []
  },
  created: function () {
    axios.get('list.json').then(function (response) {
      this.fulllist = response.data
      console.log(`response is array?: ${Array.isArray(this.fulllist)}`, this.fulllist);
    }.bind(this)).catch(function (e) {
      console.error(e)
    })
  },
  computed: {
    list: function() {
      console.log(`before computed is array?: ${Array.isArray(this.fulllist)}`, this.fulllist);
      return this.fulllist.filter(function(i) {
        console.log(i)
        return i.name === 'スライム'
      })
    }
  },
})

投稿2018/09/01 13:06