App.request issue?

Questions
1

Using app.request I only have [] on my page, code as follows. Axios works as expected (code at bottom):

<template>
<div>
  <div>
    {{brews}}
  </div>
</div>
</template>

<script>

export default {
  data() {
    return {
      brews: [],
    };
  },
  mounted() {
    const app = this.$f7;
    app.request.get('https://api.openbrewerydb.org/breweries', function (data) {
      this.brews = data;
    });
  }
};
</script>

Using Axios, it works as expected:

mounted() {
    axios.get('https://api.openbrewerydb.org/breweries').then(data => (this.brews = data.data))
  }

Why would this.brews not be available to the page in the first example?

2

Don’t use this in callback function since this inside != this outside.
Always use variable at function beginning, like: var self=this; and then use self.xxx

Also read about $setState and $update
https://framework7.io/docs/router-component.html#component-context

Change mounted hook to:

<template>
<div>
  <div>
    {{brews}}
  </div>
</div>
</template>

<script>

export default {
  data() {
    return {
      brews: [],
    };
  },
  mounted() {
    var self = this;
    self.$app.request.get('https://api.openbrewerydb.org/breweries', function (data) {
      self.$setState({
        brews: data.data
      })
      // or equivalent below
      self.brews = data.data;
      self.$update();
    });
  }
};
</script>
1 Like
3

In fact you can use this inside the callback function, but you have to use arrow syntax, so that the calling context is used as ‘this’:

this.$app.request.get(‘https://api.openbrewerydb.org/breweries’, (data) => {
this.$setState({
brews: data.data
})
// or equivalent below
this.brews = data.data;
this.$update();
});

That in fact is the reason that it works in gou axios code, because you are using arrow syntax there :slight_smile:

2 Likes
4

Thanks so much, both!

5

use app.request.promise.get
info in this post

1 Like