Vue.js : .vue 템플릿 파일 내에서 vue 메소드에서 데이터 변수를 설정하는 방법

Question

오늘 밤 처음으로 vue.js를 배우며 " 목록 "데이터 함수에 배열, 나는 그것을 아래의 메서드에서 변경할 수 없습니다. 나는 다음과 같은 코드를 가지고 있는데 내 템플릿은 원래 {name : 'daniel'}, {name : 'lorie'} 변수를 뱉어 낸다.

내가 "this.list = 데이터가"내 데이터 변수를 재설정하지 않는 네트워크 탭에서 100 명의 사용자와 같은 배열을 볼 수 있지만, 수 내 HTTP 호출이 확실히 이루어지고

<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 
    });