VueJSデータがテンプレートのメソッド返信で表示されない

Question

/* eslint-disable eol-last */ 
<template> 

<div id="app"> 
    <ul> 
     <li v-for="item in items"> /* this list is not displaying */ 
     {{ item.id }} 
     </li> 
    </ul> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app', 
    data: { 
    items: [] 
    }, 
    created() { 
    this.fetchData() 
    }, 
    methods: { 
    fetchData() { 
     this.$http.get('http://url/api/users') 
     .then(result => { 
      this.items = result.data 
     }) 
    } 
    } 
} 
</script> 

このリストは表示されません テンプレートでこれを印刷することができません。 Jsonはデータを返しますが、template.pleaseでアクセスできませんでした。私は間違いを犯しているところです。

Answer 1

あなたのAjaxコールバックでは、THIS.itemsに割り当てようとしていますが、これは範囲が間違っている可能性があります。 AJAX呼び出し 例えば let self = this; とAJAXのCB中の前に変数を作成します： `デバッガを追加 self.items = response.data;