Vue.js with Axios use data from other method

Question

I have a external api which returns a json of a user with some attributes like username. I want to use this username in my vue methods as a url parameter and defined the function getUser(). My problem is that the parameter keeps undefined

Here is my code

<script>
import Axios from 'axios-observable'
export default {
  data () {
    return {
      appointments: {},
      event_counter: 0,
      user: ''
  },
  methods: {
    getUser: function () {
      Axios
        .get('http://127.0.0.1:5000/users/get_user')
        .subscribe(response => { this.user = response.data.username })
    },
    getAppointments: function () {
      Axios
        .get('http://127.0.0.1:5000/appointments/get_appointments?user=' + this.user)
        .subscribe(response => { this.appointments = response.data })
    },
    fetchData: function () {
      setInterval(() => {
        this.getAppointments()
      }, 150000)
    }
  },
  mounted () {
    //this.user = this.getUser()
    this.getUser()
    this.fetchData()
  },
  created () {
    //this.user = this.getUser()
    this.getUser()
    this.getAppointments()
  }
}
</script>

I tried some variants with return response.data or data: this.getUser() etc. Obtaining the user in template with {{ user }} works fine but isn't helpful. I don't have any syntax or runtime error from vue/electron-vue

Any idea?

`.subscribe(response => { this.user response.data.username })` are you missing a `=` here? (in the `getUser` function) — James Whiteley, Oct 14 '19 at 14:18
@JamesWhiteley Yes but just in the stackoverflow code. A copy and paste error. — ilyricus, Oct 14 '19 at 14:21
Can you reach the link http://127.0.0.1:5000/users/get_user directly in the browser? If so, does it display what you would expect? — user6854465, Oct 14 '19 at 14:24
@TaulantGeci gotcha. And I've never seen `Axios.get().subscribe()` before - where is this from? Is `.subscribe()` a valid function? — James Whiteley, Oct 14 '19 at 14:27
@user6854465 Yes and also over vue.js. With `
{{ user }}
` I see the username on my rendered page. But I need this information in my fetchData() Method. — ilyricus, Oct 14 '19 at 14:27
@JamesWhiteley Yepp, its part of axios-observable. If I define my function like this: `getAppointments: function () { Axios .get('http://127.0.0.1:5000/appointments/get_appointments?user=tgeci') .subscribe(response => { this.appointments = response.data }) },` I see the correct JSON output from my appointments api. — ilyricus, Oct 14 '19 at 14:29
Try adding the word return just before the word Axios in your getUser function, as in return Axios.get(). Also to the same place in your getAppointments function — user6854465, Oct 14 '19 at 14:31
@user6854465 It has an effect, but not the solution. With the return statement the result is requested url is: `http://127.0.0.1:5000/appointments/get_appointments?user=[object%20Object]`, without return its: `http://127.0.0.1:5000/appointments/get_appointments?user=undefined`. — ilyricus, Oct 14 '19 at 14:38
@user6854465 No it is the subscriber object: `Subscriber {…} closed : (...) destination : SafeSubscriber isStopped : true ... ` — ilyricus, Oct 14 '19 at 14:53

score 1 · Accepted Answer · answered Oct 15 '19 at 14:05

Finally got a solution!

<script>
import Axios from 'axios'
export default {
  data () {
    return {
      appointments: {},
      event_counter: 0,
      user: 'test'
    }
  },
  methods: {
    getUser: function () {
      return Axios
        .get('http://127.0.0.1:5000/users/get_user')
        .then(response => {
          this.user = response.data.username
          return this.user
        })
    },
    getAppointments: function () {
      this.getUser()
        .then(data => {
          let url = 'http://127.0.0.1:5000/appointments/get_appointments?user=' + data
          Axios
            .get(url)
            .then(response => { this.appointments = response.data })
        })
    },
    fetchData: function () {
      setInterval(() => {
        this.getAppointments()
      }, 150000)
    }
  },
  mounted () {
    this.fetchData()
  },
  created () {
    this.getAppointments()
  }
}
</script>

The solution was to change the call of the getUser() and retrieve the date in the arrow function block .then(data =>). The answer of @loan in this Issue give me the hint: How to set variable outside axios get.

Thanks a lot to all.

Varun Agarwal · Answer 2 · 2019-10-15T06:26:45.817

0

<script>
import Axios from 'axios-observable'
export default {
  data () {
    return {
      appointments: {},
      event_counter: 0,
      user: ''
  },
  computed: {
    updatedUrl: {
       return `http://127.0.0.1:5000/appointments/get_appointments?user=${this.user}`
    }

  },
  methods: {
    forceGetUsername() {
        return this.user
    },
    getUser: function () {
      Axios
        .get('http://127.0.0.1:5000/users/get_user')
        .subscribe(response => { this.user = response.data.username })
    },
    getAppointments: function () {
      console.log(updatedUrl)
      Axios
        .get(updatedUrl)
        .subscribe(response => { this.appointments = response.data })
    },
 // Below can remain the same
}
</script>

So it seems the url is being cached and not updated once created. So I added new function to ensure the latest value is being returned. Not very ideal.

Added the URL to computed property. If this doesn't work then I am lost as well :(

edited Oct 15 '19 at 06:26

answered Oct 14 '19 at 14:53

Varun Agarwal

1,587
14
29

Logged url is: `http://127.0.0.1:5000/appointments/get_appointments?user=undefined` – ilyricus Oct 14 '19 at 14:58
OK and can you confirm this is being logged in the console before or after you are able to see the change in `{{user}}` in your template? – Varun Agarwal Oct 14 '19 at 15:00
Can confirm via console.log and Request URL: in the HTTP Header. – ilyricus Oct 14 '19 at 15:03
ok now in `data()` part make the user with a default value like hello. So it should be `user: 'hello'` so we can identify where the bug occurs based on what the outputted url is now. If it contains hello then the original cached value is being used. I remember facing something similar. If it is still undefined, the problem is elsewhere. – Varun Agarwal Oct 14 '19 at 15:05
Works as assumed: `Request URL:http://127.0.0.1:5000/appointments/get_appointments?user=test` – ilyricus Oct 14 '19 at 15:16
So I made tweak to the code, please see it. Also in my case I used `created` and not `mounted` though that should not make a difference. – Varun Agarwal Oct 14 '19 at 15:32
Hmm...I am still getting the cached value user=test. Also tried to remove this.getUser() from `mounted`. – ilyricus Oct 14 '19 at 15:42
Changed URL tocomputer. I am using tis code in codesanbox and its working fine for me. – Varun Agarwal Oct 15 '19 at 06:27
Are you using `axios-observable`. I think that there is the matter, because the observable handling. – ilyricus Oct 15 '19 at 13:25

Vue.js with Axios use data from other method

2 Answers2