I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error:
Cannot read properties of null (reading 'style')Upon researching on Stack Overflow, I learned that this error occurs when
document.getElementById("view")null. This could be due to two reasons:
- The script is executing before the document has fully loaded, resulting in the inability to find the
viewitem. - The
viewitem does not exist at all.
Given that there is indeed a view item, it seems like the first reason might be causing the error. However, I am unsure why this happens or how to resolve it.
Below is the code snippet from my App.vue file:
<template>
<h1 @click="showInfo()">Header</h1>
<div class="view" style="display: none">
<AnotherView />
</div>
</template>
<style scoped>
.view {
}
</style>
<script>
import AnotherView from "./views/AnotherView.vue";
export default {
components: { AnotherView },
methods: {
showInfo() {
document.getElementById("view").style.display = "block";
},
},
};
</script>