Vu.jsでaxiosを使いたいけどうまくできない!

Question

作りたいもの

ホットペッパーのAPIからデータを取得して、表示させたい！

参考にしているけどうまくいかないサイト
↑
これをやっているのですがうまくいきません！

上記のサイトの最終的なコード

Vue.jsの　var app ＝　〜〜〜〜〜〜などは間違いなく記述しています。
↓

<ul>
    <li v-for="item in infoAll" :key="item.id">
        {{ item.updated_at }}<br>
        <a :href="item.url" target="_blank">
        {{ item.title }}
        </a>
    </li>
</ul>

data: function() {
    return {
        qittatoken: 'トークン番号' //アクセストークンがある場合は記述 
        infoAll: {}
    }
},
methods: {
    getAPIs: function() {
      axios.get(`https://qiita.com/api/v2/users/[ユーザー名]/items`) 
      //アクセストークンがある場合はget()内に記述を追加してください
      .then(res => {
        this.infoAll = res.data
        console.log(this.infoAll)
      })
    }
 },
created: function() {
    this.getAPIs()
  }  

コンソールに表示されているエラー文

[Vue warn]: Property or method "infoALl" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

↑
これがコンソールに表示され、ブラウザの画面にもcssが反映されているだけで文字などは表示されません。。

公式のものを試したらうまく配列を取得できるのに。。。

Vue.jsの公式リファレンス

この公式のリファレンスのコードだとちゃんと表示されます！
↓

<div id="app">
  {{ info }}
</div>

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

このような記述でmounted?methods?を呼び出したいです！！

created: function() {
    this.getAPIs()
  }

わかりにくい説明だとは思いますが、よろしくお願い致します！！

Comments

[hoshi-takanori]

Vue の qittatoken: 'トークン番号' の後ろに , (カンマ) が必要かも。

[Ichiro08]

カンマ入れたんですが、ダメでした。。
また、色々試してみます！
ありがとうございます！

[hoshi-takanori]

HTML や Vue のソースの infoAll はl が小文字なのに、エラーメッセージの infoALl は L が大文字なのが気になりますね。他のどこかに infoALl があったりしませんか？

[Ichiro08]

たしかに！気づきませんでした！
あれからコードをイジって違ってきているかもですが、探してみます！！