Vue.js с Axios используют данные из другого метода - PullRequest
Новая
       35

Vue.js с Axios используют данные из другого метода

1 голос
/ 14 октября 2019

У меня есть внешний 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

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 15 октября 2019

Наконец-то есть решение! 

<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 в этом выпуске дает мне подсказку: Как установить переменную вне аксиос get .

Большое спасибо всем.

0 голосов
/ 14 октября 2019 
<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 для вычисляемого свойства. Если это не сработает, я тоже потерялся :(

...