开发者问题收集

使用 Axios 和 Vue 获取 api 数据 - 返回未定义

2018-03-24
9571
javascript vuejs2 axios

尝试将我的 API 与 Vue/Axios 集成时遇到了障碍。基本上，Axios 正在获取数据（它确实控制台记录了我想要的数据）...但是当我尝试将该数据获取到我的空变量（在我的组件的数据对象中）以存储它时，它会抛出“eval 未定义”错误。有人知道为什么这对我来说不起作用吗？谢谢！ 

<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>
2个回答

因为您使用的是 .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 then 的作用域主体内访问 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);
      });

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

m3characters
2018-03-24

.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);
    });
  }
}
Vucko
2018-03-24