I am facing a situation where I need to trigger an event whenever my sidebar opens. This event should be called every time the sidebar is opened.
For example, when I click on an element, it triggers the opening of my sidebar which then calls a function that displays an alert.
The issue I am encountering is that my code is being executed from the mounted function in Vue.js
Below is my first file that initiates the call to my side bar:
<template>
<div>
<p>Just a template</p>
</div>
</template>
<script>
export default {
name: 'home',
data: function() {
return {
status: 'critical'
}
},
mounted() {
var openSidebar = function() {
document.getElementsByClassName('side-bar')[0].style.display = 'block';
};
document.getElementById('box').addEventListener('click', openSidebar);
},
}
</script>
<style>
</style>
This is my second file:
<template>
<div>
<app-server-status></app-server-status>
<div id="box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique laborum repellat nihil maxime et veniam sed, sequi minima, quasi ipsum enim.</p>
</div>
<div class="side-bar">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro amet sed autem non qui dolor minima. Incidunt eos recusandae doloribus hic nesciunt nostrum suscipit dolorum velit, voluptatum, accusamus, ullam fugiat!</div>
</div>
</template>
<script>
//import local component server status
import ServerStatus from './ServerStatus.vue';
export default {
name: 'home',
components: {
'app-server-status': ServerStatus
},
methods: {
callAlert() {
alert('TESTE')
}
},
created() {
},
mounted() {
function callAlert() {
alert('Test');
}
},
}
</script>
<style>
#box {
background: red;
width: 200px;
height: auto;
float: left;
}
.side-bar {
position: absolute;
width: 250px;
height: 400px;
right: 0;
display: none;
background: blue;
}
</style>
How can I successfully call an alert function when the sidebar opens?