爲什麼VueJS不會調用created（）函數中的方法？

Question

學習VueJS並嘗試對組件加載進行簡單的API調用，以將回購列表放到我的頁面上。當我撥打created()方法並設置this.repos時，沒有問題。但是，如果我將它設置爲一種方法，然後從this.getRepos調用它，什麼都不會發生。沒有錯誤，沒有。我錯過了什麼VueJS？

這工作：

data:() => ({ 
    msg: 'Github Repos', 
    ok: 'Im practically giving away these repos', 
    repos: [], 
    }), 
    methods: { 
    }, 
    async created() { 
    const repos = await axios.get('https://api.github.com/orgs/octokit/repos'); 
    this.repos = repos.data.map(repo => 
     `<div class="box"><a href="${repo.html_url}"> 
     ${repo.name} 
     </div>`, 
    ); 
    }, 

這不起作用：

data:() => ({ 
    msg: 'Github Repos', 
    ok: 'Im practically giving away these repos', 
    repos: [], 
    }), 
    methods: { 
    getRepos: async() => { 
     const repos = await axios.get('https://api.github.com/orgs/octokit/repos'); 
     this.repos = repos.data.map(repo => 
     `<div class="box"><a href="${repo.html_url}"> 
      ${repo.name} 
     </div>`, 
    ); 
    }, 
    }, 
    created() { 
    this.getRepos(); 
    }, 

任何想法？謝謝！

Answer 1

這只是因爲你在這裏使用了箭頭函數，所以this.repos的this被綁定到窗口對象。將async() => {}更改爲async function() {}將幫助您克服它。

參見demo

注意，不應該使用的箭頭函數來定義的方法（例如，加：（）=> this.a ++）。原因是箭頭函數綁定父上下文，所以這不會是你期望的Vue實例，而this.a將是未定義的。

reference

Answer 2

另一種方法使用愛可信的呼叫與Vue公司則（）方法：

demo

created() { 
axios.get('https://api.github.com/orgs/octokit/repos', { 
    params: { 
    type: 'all', 
    }, 
}) 
.then((res) => { 
    console.log('Success Response', res.data); 
    res.data.forEach((repo) => { 
    this.repos.push({ name: repo.name, url: repo.html_url, language: repo.language }); 
    }); 
}) 
.catch((err) => { 
    console.log('Error', err); 
}); 
},