How can i use setDefaultDeviceBackButtonListener with Vue

fatihucom

Hi everyone,

How can i use setDefaultDeviceBackButtonListener with Vue. I cant use it.

https://onsen.io/v2/api/vue/$ons.html page is not satisfying. There is not a working example.

Can anyone help me?
Thanks for your patience.

Fran Diox

this.$ons.setDefaultDeviceBackButtonListener(function() {
   console.log('hello');
});

You can call it at the beginning of the app, like explained in the docs.

fatihucom

@Fran-Diox Hi,

I try it on beforeCreate function

beforeCreate: function () {
    try {
        this.$ons.setDefaultDeviceBackButtonListener(function () {
            alert('hello');
        });
    } catch (e) {
        console.log(e);
    }
}

Its not working. But when i try this its working.

beforeCreate: function () {
    try {
        if (this.$ons.isReady()) {
            //this.$ons.disableDeviceBackButtonHandler();
            window.document.addEventListener('backbutton', function () {
                alert('back');
            }, false);
        }
    } catch (e) {
        console.log(e);
    }
}

Whats my wrong?
Thanks again.

Fran Diox

@fatihucom

As said in the description, it must be called on $ons.ready. Also, this only applies to the “default” handler, not to every component handler. See this codepen for more details (press ESC to simulate a device back button). It only works when Navigator’s handler doesn’t (when the stack is <=1).

fatihucom

@Fran-Diox Thanks for all, thanks for the example.