DigiProduct's avatar

Need help with an Axios problem

Can anyone quickly tell me what stupid thing I am doing here?

This is in a Vue component that seems to be being displayed, and doesn't report any errors

My Axios completes, and I can see my data being returned in the Network tab in Chrome Dev Tools

YET ... none of the console.logs after the Axios gets actioned ... not even the one that should log "loadLeads ended"

I must be doing something stupid ... but I just can't see it

Can anyone give me a pointer?



import axios from 'axios'


export default {
  name: 'PageIndex',
  data () {
    return {
        contacts: [],
      
    }
  },
  methods: {
    loadLeads: function() {
        console.log('loadLeads started');

        this.axios.get("localhost:8000/getleads")
        .then(
            response=>{
                console.log(response)
            }           
        )
        .catch(
            error=>{
                console.log(error)
            }
        );

        console.log('loadLeads ended');
    },


0 likes
12 replies
SteveCove's avatar

A few issues. axios is not a property of the object, so you don't need to prefix this., your API URL should have a protocol http://localhost... and the request body is stored in the data property of the axios response console.log(response.data)

I seem to remember trying to console.log the full response object myself, and never getting any output. I have no idea why this might be, perhaps I'm remembering wrong but worth a try

Nakov's avatar
  • Were the logs added at the same time when you wrote the axios call? If not make sure that you re-compile the scripts using npm run dev or npm run watch which will compile anytime there is a change in a script.

  • There is a log level in the Chrome inspect tool, so check if the info level is for some reason unchecked?

patrickadvance's avatar

Use This

import axios from 'axios'


export default {
  name: 'PageIndex',
  data () {
    return {
        contacts: [],
      
    }
  },
  methods: {
    loadLeads() {

                 console.log('loadLeads started');

            axios.get("/getleads")
            .then( response => {
                    console.log(response)
                })
            .catch(error => {
                    console.log(error)
                });

            console.log('loadLeads ended');
    },
DigiProduct's avatar

Thanks for the help, but I'd already tried most of those suggestions before posting here.

I forgot to remove the this.axios ... I'd tried that out of desperation

I've been going round and round in circles with this for about 2 hours ... tried so many different combination of things I've just about forgot what I originally started with

I just remade it with the following ...





import axios from 'axios'


export default {
  name: 'PageIndex',
  data () {
    return {
        contacts: {},
      
      contactsAttention,
      contactsToday,
      conversations,
      appointments,
      offline
    }
  },
  methods: {
    loadLeads: function() {
        //this.contacts = this.contactsToday;
        console.log('loadLeads started AGAIN');

        axios.get('http://localhost:8000/getleads')
        .then(
            response=>{
                ({data}) => (this.contacts =  data.data)
                console.log(this.contacts)
            }           
        )
        .catch(
            error=>{
                console.log(error)
            }
        );

        console.log('loadLeads ended');
    },



DigiProduct's avatar
DigiProduct
OP
Best Answer
Level 6

Ended up deleting the whole script section, and then re-typing it .. and it finally worked.

Must have been some minor typo there that I kept overlooking again and again and again

Thanks for all the help guys

1 like
DigiProduct's avatar

Except I just realised that I don't know how to do that ... do I just apply a Best Answer?

Please or to participate in this conversation.