Vue.js：.vueテンプレートファイル内のvueメソッドでデータ変数を設定する方法

Question

私は今夜初めてvue.jsを学習しています。なぜ私が "リスト "の配列をデータ関数には、私は以下のメソッドで変更することはできません。私は次のコードを持っており、私のテンプレートは元の{name： 'daniel'}、{name： 'lorie'}変数を吐き出しています。

私はネットワーク]タブで100のようなユーザーの配列を見ることができるように私のHTTP呼び出しは間違いなく行われているが、「this.list =データが」

<template> 
    <pre>{{list}}</pre> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     list: [{name: 'daniel'}, {name: 'lorie'}] 
    } 
    }, 
    created() { 
    this.fetchContactList() 
    }, 
    methods: { 
    fetchContactList() { 
     this.$http.get('https://jsonplaceholder.typicode.com/users', (data) => { 
     this.list = data 
     }) 
    } 
    } 
} 
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style lang="scss"> 
    ul.user-list { 
    background: #fafafa; 
    border:1px solid #ebebeb; 
    padding:40px; 
    li { 
     list-style: none; 
     display: block; 
     margin-bottom:10px; 
     padding-bottom:10px; 
     border-bottom:1px solid #ebebeb; 
    } 
    } 
</style> 

Answer 1

var myList = []; 

私のデータ変数をリセットしていません次に、あなたのリターンデータ

return { 
    list : myList 
} 

Answer 2

にあなたはオプションの引数で、あなたの成功コールバックを渡ししようとしています。これにあなたのGETリクエストを変更

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); 

： $httpサービスは、次の形式での約束を使用しています

this.$http.get('https://jsonplaceholder.typicode.com/users').then((response) => { 
    this.list = response.body; // The data you want is in the body 
    });