I am currently working on a Vue component that is supposed to render the first time a page is opened. However, I am facing some confusion regarding the logic behind this. My approach involves using localStorage to check for an item called 'wasVisited'. I need to set it to 1 at a certain point so that the modal does not appear the next time the view triggering the modal is accessed. I am just unsure of where exactly I should place this logic; the mounted() function doesn't seem like the right spot.
<template v-if="localStorage.getItem('wasVisited') === null">
<div>
<b-modal ref="disc" title="Hello" ok-only ok-variant="light" size="lg" body-bg-variant="dark" header-bg-variant="dark" header-text-variant="light" body-text-variant="light" footer-bg-variant="dark" footer-text-variant="light" title-class="text-light">
<div class="text-justify modal-text">
<p>Hi from modal</p>
</div>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['disc'].show()
},
hideModal() {
this.$refs['disc'].hide()
},
},
mounted() {
console.log('Modal mounted.');
this.showModal();
localStorage.setItem('wasVisited', '1');
}
}
</script>