Unable to call " app.request.get" from the mounted hook of a vue component?

Questions
1

Unable to call " app.request.get" from the mounted hook of a vue component. It is giving the error: Cannot read property ‘get’ of undefined"
Here is the code:

<template>
    <f7-page>
        <f7-navbar title="Add Categories" back-link="Back"></f7-navbar>
        <div class="block block-strong">
        <p>Add Categories</p>
        </div>
        <form class="list form-store-data" id="demo-form">

        </form>
    </f7-page>
</template>
<script>
    import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
    export default {
        components: {
            f7Navbar,
            f7Page,
            f7BlockTitle
        },
        mounted (){
            console.log('Add Categories mounted')
            app.request.get('http://api.slim.ib/index.php/api/test', function (data) {
              console.log(data);
            }); 
        }
    };
</script>
2

Because there is no app reference anywhere in your code. It should be this.$f7 and it is better to call for it in onF7Ready method http://framework7.io/vue/vue-component-extensions.html#context-extensions

3

Hi,
Thank you so much for your reply. Congratulations and thank you so much for building such a wonderful Framework.

I had figured out the problem but now having an another issue. How can I make the object available which is retured by an ajax call?

<template>
  <f7-page>
    <f7-navbar title="Test Vue Page" back-link="Back"></f7-navbar>
    <div class="block block-strong">
    <p>Test Vue Page</p>
    </div>
    <div>{{ipaddress}} This is your IP Address</div>
   </f7-page>
</template>
<script>
export default {
    data () {
        return {
            ipaddress: ""
        }
    },
    mounted() {
			const self = this;
			const app = self.$f7;
        app.request.get('https://httpbin.org/ip', 
			   function (data) {
            var JSONObject = JSON.parse(data);
				this.ipaddress = JSONObject.origin
            console.log('IP Address:'+this.ipaddress)  
				});
    }
}
</script>

In above the ipaddress is not getting updated. How can I make all the response returned by an ajax call locally available to the component. Please help

4

Wrong reference to component. Try self.ipaddress = JSONObject.origin

5

Thank you so very much!!!