Framework7 vue + cordova problem with deviceready and buttonback

Questions
1

Hello!

I have the problem with deviceready and backbutton on cordova implement.

This is my code:

export default {
  mounted() {
    document.addEventListener("deviceready", this.onDeviceReady, false);
  },
  methods: {
    onDeviceReady() {
      document.addEventListener("backbutton", this.onBackKeyDown, false);
    },
    onBackKeyDown(e) {
      e.preventDefault();
      this.$f7router.back();
    }
  }
}

This code upload every time when I change route page. This ^ code doesn’t work, but when I change first code I see console.log

export default {
  mounted() {
    document.addEventListener("deviceready", console.log('ready'), false);
  },
}

Why this version V4 framework7 I have problem with this implement. On V2 version everything correct work.

From what I noticed problem with scope methods (vue) or function is vanilla JS.

Please help me! Patryk

1 Like
2

Me too need solution.

3

Please, create new project with Framework7 CLI and check how it is done there

1 Like
4

I create new project based on 2.3.1 version cli and still doesn’t work.

In file home.vue add methods and mounted:

    methods: {
      onDeviceReady() {
        console.log('ready');
        document.addEventListener("backbutton", this.onBackKeyDown, false);
      },
      onBackKeyDown(e) {
        e.preventDefault()
        this.$f7router.back();
      }
    },
    mounted() {
      document.addEventListener("deviceready", this.onDeviceReady, false);
    }

At the bottom it work, but It works downstairs, but it does not satisfy me:

    methods: {
      onDeviceReady() {
        console.log('ready');
        document.addEventListener("backbutton", this.onBackKeyDown, false);
      },
      onBackKeyDown(e) {
        e.preventDefault()
        this.$f7router.back();
      }
    },
    mounted() {
      document.addEventListener("deviceready", console.log('test'), false);
    }

Please help solved this problem :slight_smile: