[Vuejs]-Vue JS conditional rendering on first time opening the page

by

0👍

✅

A better way to write your code should be

<template>
<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.');
        if(localStorage.getItem('wasVisited') === null) this.showModal();
        localStorage.setItem('wasVisited', '1');
    }
}
</script>

Basically what I did was, I removed your v-if from your template and instead added it to your mounted property, this way if the localStorage hasn’t been set, automatically the function to show modal is called. And at the same time we assign a value to wasVisited

Leave a comment