使用 Axios 和 Vue 获取 api 数据 - 返回 undefined

Question

在尝试将我的 API 与 Vue/Axios 集成时遇到了麻烦。基本上，Axios 正在获取数据（它确实 console.log 我想要的）......但是当我尝试将该数据获取到我的空变量（在我的组件的数据对象中）来存储它时，它会抛出一个“未定义在评估”错误。关于为什么这对我不起作用的任何想法？谢谢！

<template>
  <div class="wallet-container">
    <h1 class="title">{{ title }}</h1>
    <div class="row">
      {{ thoughtWallet }}
    </div>
  </div>
</template>

<script>

import axios from 'axios';
export default {

  name: 'ThoughtWallet',
  data () {
    return {
      title: 'My ThoughtWallet',
      thoughtWallet: [],
    }
  },
  created: function() {
    this.loadThoughtWallet();
  },
  methods: {
    loadThoughtWallet: function() {
      this.thoughtWallet[0] = 'Loading...',
      axios.get('http://localhost:3000/api/thoughts').then(function(response) {
        console.log(response.data); // DISPLAYS THE DATA I WANT
        this.thoughtWallet = response.data; // THROWS TYPE ERROR: Cannot set property 'thoughtWallet' of undefined at eval
      }).catch(function(error) {
        console.log(error);
      });
    }
  }
}

</script>

Answer 1

因为你使用.then(function(..) { })this不会引用vue上下文this。

您有两种解决方案，一种是在axios调用之前设置一个引用您想要的this的变量，例如：

var that = this.thoughtWallet
axios.get('http://localhost:3000/api/thoughts').then(function(response) {
        console.log(response.data); // DISPLAYS THE DATA I WANT
        that = response.data; // THROWS TYPE ERROR: Cannot set property 'thoughtWallet' of undefined at eval
      }).catch(function(error) {
        console.log(error);
      });

另一个是使用新的语法（你需要确保你的代码对于还不支持它的浏览器正确地转译），它允许你在 axios 的作用域内访问this那么。

axios.get('http://localhost:3000/api/thoughts').then((response) => {
        console.log(response.data); // DISPLAYS THE DATA I WANT
        this.thoughtWallet = response.data; // THROWS TYPE ERROR: Cannot set property 'thoughtWallet' of undefined at eval
      }).catch(function(error) {
        console.log(error);
      });

发生这种情况的原因是因为在该函数内部，this 将引用函数的上下文，因此不会有 thoughtWallet 属性

Answer 2

.get 方法中的this.thoughtWallet 指的是 axios 对象，而不是 Vue 的。您可以简单地在开始时定义 Vue 的this：

methods: {
  loadThoughtWallet: function() {
    let self = this;

    this.thoughtWallet[0] = 'Loading...',
    axios.get('http://localhost:3000/api/thoughts').then(function(response) {
      console.log(response.data); // DISPLAYS THE DATA I WANT

      self.thoughtWallet = response.data;

    }).catch(function(error) {
      console.log(error);
    });
  }
}