Using Axios and Vue to fetch api data - returning undefined

Question

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>

I think the problem is you are trying to print the object..

Sakshi Garg
– Sakshi Garg

2018-03-24 19:01:03 +00:00
Commented Mar 24, 2018 at 19:01 — Sakshi Garg
– Sakshi Garg, Commented Mar 24, 2018 at 19:01

m3characters · Accepted Answer · 2018-03-24 18:54:21Z

10

Because you're using .then(function(..) { }) this won't refer to the vue context 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);
      });

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

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

answered Mar 24, 2018 at 18:54

m3characters

2,2902 gold badges16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Corey Bush Over a year ago

Very helpful explanation. Thank you!

imin Over a year ago

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.

- >Unfortunately, there's literally hundreds of Vue + axios tutorial that teaches us to pass the result from axios by doing this.variable inside get or post method

Vucko · Accepted Answer · 2018-03-24 18:50:54Z

4

this.thoughtWallet inside the .get method is referring to the axios object, not Vue's. You can simply define Vue's this on the start:

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

answered Mar 24, 2018 at 18:50

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

1 Comment

imin Over a year ago

this.thoughtWallet inside the .get method is referring to the axios object, not Vue's. - >Unfortunately, there's literally hundreds of Vue + axios tutorial that teaches us to pass the result from axios by doing this.variable inside get or post method

Collectives™ on Stack Overflow

Using Axios and Vue to fetch api data - returning undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related