JAVASCRIPT

vuetify open modal based on url anchor or #

/*
This code uses Vue, Vue Router to get the URL, and Vuetify for template components

It will check on load if there is an anchor point and if so opens the modal.
If you change the anchor point it will react to that and when modal is closed it will remove the anchor
*/

//---------
<template>
    <v-dialog v-model="modal_bool">
        <v-card>
            <p>This is the modal where I will display info!</p>
        </v-card>
    </v-dialog>
</template>

<script>
export default {
    name: "Modal",
    data: function () {
        return {
            modal_bool: false,
        };
    },
    watch: {
        "modal_bool"() {
            if (!this.modal_bool) this.$router.push({ path: this.$route.path })
        },
        "$route.hash": {
            immediate: true,
            handler() {
                if (this.$route.hash) this.modal_bool = true
                else this.modal_bool = false
            }
        }  
    }
};
</script>