Question

学习VueJS并尝试对组件加载执行简单的API调用，以将repos列表放到我的页面上。当我从this.repos方法调用并设置created()时，没问题。但是，如果我将其设置为方法，然后从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的{{1}}绑定到了窗口对象。将this更改为async () => {}将有助于您克服它。

请参阅demo

请注意，您不应使用箭头功能来定义方法（例如加号:(）=＆gt; this.a ++）。原因是箭头函数绑定了父上下文，所以这不会是你期望的Vue实例，并且this.a将是未定义的。

reference

Answer 2

使用then（）方法使用Vue进行Axios调用的另一种方法：

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

为什么VueJS不会从created（）函数调用方法？

2 个答案: