Pass data from event in VueJS

Question

So, I'm developing a Cordova Android app with VueJS and I use background geolocation plugin

It emits global event called 'location' which my app listens in main.js

function onDeviceReady () {
  BackgroundGeolocation.on('location', (location) => {})
}

document.addEventListener('deviceready', onDeviceReady, false)

How can I pass location data to variable in component every time event is fired?

Answer 1

Try to add event listener in mounted method in your component and point it's handler to component method, like this:

export default {
    data() {
        return {
            location: null,
        }
    },
    mounted() {
        document.addEventListener('deviceready', this.onDeviceReady, false)
    },
    beforeDestroy() {
        // remember to remove event listener
        document.removeEventListener('deviceready', this.onDeviceReady)
    },
    methods: {
        onDeviceReady() {
            BackgroundGeolocation.on('location', this.handleLocation)
        },
        handleLocation(location) {
            // you've got location!
            this.location = location
        }
    }
})