I am currently working on a Vue CLI application (using the Webpack template) that utilizes Bootstrap Vue for displaying modal windows. In my Vue component's mounted() hook, I am attempting to programmatically show the modal by referencing the Bootstrap Vue documentation.
<script>
export default {
name: 'ButtonComponent',
mounted() {
const showModal = sessionStorage.getItem('showModal');
if (showModal === 'yes') this.$refs.myModal.show();
}
}
</script>
The above code functions as expected. However, when I introduce a setTimeout() function like so:
<script>
export default {
name: 'ButtonComponent',
mounted() {
const showModal = sessionStorage.getItem('showModal');
if (showModal === 'yes') setTimeout(() => this.$refs.myModal.show(), 3500);
}
}
</script>
For some reason, the modal does not appear after 3.5 seconds as intended. Although the timeout itself works, indicated by using console.log(), it seems like the Vue JS instance may not be accessible within the timer. I have attempted declaring a variable such as const self = this; and using it in the timeout, but unfortunately, that did not resolve the issue either. Can anyone provide insights on what might be causing this behavior?