I'm encountering a strange issue with my modal in Vue.js. It only appears on a specific page named 'Item', but when I click on a different view, the page reloads unexpectedly. This problem seems to occur only with the route containing the modal component. Removing the modal solves the issue. Is there something I'm overlooking? Should the modal component be placed outside of the layout?
Here is a snippet from Layout.vue:
<template>
<div>
<Modal v-if="this.$route.name === 'Item'" />
<Navbar />
<transition-group name="jumbo">
<Jumbotron :key="1" v-if="this.$route.path === '/'" />
<SecondaryJumbotron :key="2" v-if="this.$route.path !== '/'" />
</transition-group>
<transition appear name="page">
<router-view></router-view>
</transition>
<SideItems
v-if="this.$route.path !== '/' && this.$route.name !== 'Item'"
/>
<Footer />
</div>
</template>
<script>
import Navbar from "./components/Navbar";
//other imports...
import Modal from "./components/Modal";
export default {
name: "app",
components: {
Modal,
//other components
SideItems
}
};
</script>
List of routes:
const routes = [
{
name: "Home",
path: "/",
component: index,
meta: {
title: "Home" + appName,
}
},
{
name: "Signup",
path: "/signup",
component: signup,
meta: {
title: "Signup" + appName,
}
},
//other routes...
{
name: "Item",
path: "/item/:id",
component: item,
meta: {
title: "Item" + appName,
}
},
];
Snippet from Modal.vue:
<template>
<div class="modal" id="item-modal" @click="modalHide">
<div class="modal-item-image" @click="modalHide">
<img :src="getMainImage" @click="modalHide" />
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["getMainImage"])
},
methods: {
modalHide() {
document.getElementById("item-modal").style.animation =
"opacity-out 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards";
document.getElementById("item-modal").style.pointerEvents = "none";
}
}
};
</script>