Vue.js 与 Axios 使用来自其他方法的数据

Question

我有一个外部 api，其中 returns 一个 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 似乎被缓存并且在创建后不会更新。所以我添加了新功能以确保返回最新值。不太理想。

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

Answer 2

终于找到解决办法了！

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

解决方案是更改 getUser() 的调用并在箭头功能块 .then(data =>) 中检索日期。本期@loan的回答给了我提示：How to set variable outside axios get.

非常感谢大家。

Vue.js 与 Axios 使用来自其他方法的数据

Vue.js with Axios use data from other method

observable

vue.js

axios

electron-vue