[V2] using API F7 with Vue

Questions
1

im using this https://github.com/caiobiodere/cordova-template-framework7-vue-webpack

and my question is how i can use app.dialog.progress() on methods vue out of the onf7init / onf7ready

example here :

methods:{
    onF7Ready(f7) {
       f7.dialog.progress(); // YES I CAN USING HERE..
      },
    getdata:function(){
        //here the problem
         // im using this.$f7.dialog.progress() , but nothing .. on V1 , i can using like window.f7.showIndicator();
   }
}
2

If you are sure that main root component is already mounted (and f7 app initialized) when you call it, then you can call it as

this.$root.$f7.dialog.progress()
3

[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property '$f7' of undefined"

im using ajax with beforeSend btw … when im put that code , not work anymore since update to v2… at v1 i can using window.f7.showIndicator()

4

Looks like you are doing it before the main app component mounted, it won’t work. Move logic to onF7Ready instead

5

how i can move logic function ‘save data’ into f7ready?

here my little code :

  export default {
    methods: {
        onF7Ready: function () {
          this.getdata();
        },
        savetest: function () {
          $.ajax({
            type: 'POST',
            data:{blablabla},
            url: 'blablabla',
            beforeSend: function () {
                   //here i need to show this.$f7.dialog.progress()
            },
            success: function (data) {},
            error: function (jqXHR, textStatus, errorThrown) {}
          });
        },
   }
  }
6

I guess, it is called when user click something = means app already mounted and you can keep it as it is