I'm experiencing an issue with a page that is only partially rendering. Specifically, the page renders Listings but not Bookings. After some investigation, I discovered that removing the divs associated with isReviewed() resolves the rendering issue. It seems like the component is causing errors.
<template>
<div>
<p><router-link to="start">ClearBnB</router-link></p>
<Navbar />
<p>Profile page for {{ username }}</p>
<hr>
...
Upon adding this component:
<template>
<p>Review</p>
<p v-bind="comment" class="review"></p>
<p>Rating: <span v-for="star in rating" v-bind:key="star">⭐</span></p>
</template>
<script>
export default {
name: 'ReviewItem',
props: ['rating', 'comment'],
data() {
return {
rating: [1, 1, 1, 1, 1],
comment: 'test comment',
}
}
}
</script>
<style>
</style>
An error message is triggered:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (runtime-dom.esm-bundler.js:36)
at patchBlockChildren (runtime-core.esm-bundler.js:4087)
at patchElement (runtime-core.esm-bundler.js:4055)
at processElement (runtime-core.esm-bundler.js:3871)
at patch (runtime-core.esm-bundler.js:3788)
at patchBlockChildren (runtime-core.esm-bundler.js:4091)
at patchElement (runtime-core.esm-bundler.js:4055)
at processElement (runtime-core.esm-bundler.js:3871)
at patch (runtime-core.esm-bundler.js:3788)
at patchKeyedChildren (runtime-core.esm-bundler.js:4506)
Vue appears to interpret the parentNode as null, creating confusion in my troubleshooting efforts.