Populate data from api

[capgros]

Hello,

I'm trying to find a way to populate data from an api and use it in a template, but I'm not capable of making it run. I'm trying with axios. I know vue-axios exists but don't know how to hook it to the vue instance.

I'm pretty noob about this but I've been trying for a week and I'm not able to achive any result.

It would be interesting to be able to load this data while the preoloading screen is on, but I have no clue where to start.

I've been studing f7 + vue documentation but nothing works. The last i've tried:

<template>
...
</template>
<script>
import axios from 'axios'
let user = []
axios.get('https://api.github.com/users/capgros').then(response => { user  = response.data.result })
export default {
  data: function () {
    return {
      user:user //user undefined 
    }
  }
}
</script>

Any help will be very much apreciated. Thank you!

[scriptPilot]

@capgros - As it is no App Framework related issue, please post it to Framework7-Vue

[patrickpissurno]

Just if anyone comes into this same issue, App Framework comes with Dom7.ajax, which you can use just as you would normally use jQuery's ajax. More information here: https://v1.framework7.io/docs/dom.html#ajax

[capgros]

If anybody comes down to this issue in the future, as the variable user is assigned when the instance is created it gathers the value of undefined.

I solved this declaring an object to hold the results and creating a method that resolves the promise:

<template>
...
</template>
<script>
import axios from 'axios'
export default {
  data: function () {
    return {
      user: {} 
    }
  },
 methods: {
   fetchUsers() {
      axios.get('https://api.github.com/users/capgros').then(response => { this.user  = response.data.result })
 }
}
</script>