带有Axios的Vue.js使用其他方法的数据

Question

我有一个外部api，该API返回具有某些属性（如用户名）的用户的json。我想在vue方法中使用此用户名作为url参数，并定义函数getUser（）。我的问题是参数保持未定义

这是我的代码

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

我用return response.data或data: this.getUser()等尝试了一些变体。使用{{ user }}获取模板中的用户可以正常使用，但没有帮助。我没有来自vue / electron-vue的任何语法或运行时错误

任何想法？

Answer 1

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

因此，似乎该网址已被缓存，并且一旦创建便不会更新。因此，我添加了新功能以确保返回最新值。不太理想。

将URL添加到计算属性中。如果这不起作用，那么我也会迷失:(