使用Axios和Vue提取api数据-返回未定义 [英] Using Axios and Vue to fetch api data - returning undefined

问题描述

尝试将我的API与Vue/Axios集成时遇到麻烦.基本上，Axios正在获取数据(它确实是console.log我想要的)...但是当我尝试将数据获取到我的空变量(在组件的数据对象中)进行存储时，它会抛出未定义"评估时出现错误.有什么想法为什么对我不起作用?谢谢！

Running into a snag with trying to integrate my API with Vue/Axios. Basically, Axios is getting the data (it DOES console.log what I want)... But when I try to get that data to my empty variable (in the data object of my component) to store it, it throws an "undefined at eval" error. Any ideas on why this isn't working for me? Thanks!

<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>

推荐答案

因为您使用的是 .then(function(..){}) this 将不会"请参考vue上下文 this .

Because you're using .then(function(..) { }) this won't refer to the vue context this.

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

You have two solutions, one is to set a variable that references the this you want before the axios call, e.g.:

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

另一种方法是使用新语法(对于不支持该语法的浏览器，您需要确保对其进行正确的代码转换)，这使您可以在内部使用 this 然后将轴距的范围限定为主体.

The other is to use the new syntax (for which you need to make sure your code is transpiled correctly for browsers that don't support it yet), which allows you to access this inside the scoped body of the axios then.

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 属性

The reason this happens is because inside that function/then, this will be referring to the context of the function, hence there won't be a thoughtWallet property

这篇关于使用Axios和Vue提取api数据-返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！