Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue beforeDestroy example
<template>
<div class="container">
<div>
<button @click="toggleMouse">Toggle Mouse</button>
</div>
<Mouse v-if="isMouseVisible" />
</div>
</template>
<script>
import Mouse from './Mouse'
export default {
components: {
Mouse
},
data() {
return {
isMouseVisible: true
}
},
methods: {
toggleMouse () {
this.isMouseVisible = !this.isMouseVisible
}
}
}
</script>
<template>
<div class='container'>Mouse component</div>
</template>
<script>
export default {
mounted() {
window.addEventListener("mousemove", this.printMousePosition);
},
methods: {
printMousePosition(e) {
console.log(`Current position (x, y): (${e.pageX}, ${e.pageY})`);
}
},
beforeDestroy() {
console.log('before destroy', this.message);
window.removeEventListener('mousemove', this.printMousePosition);
},
destroyed() {
console.log('destroy');
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.