添加Vue组件时报parentNode TypeError错误页面仅部分渲染如何解决

问题根源 #

你的报错完全来自ReviewItem组件的语法错误，直接导致Vue虚拟DOM渲染时无法正确识别DOM节点的父子关系，触发parentNode为空的异常。

具体修复步骤 #

1. 给ReviewItem组件添加唯一根节点 #

Vue要求单文件组件的template必须有且仅有一个根元素，你当前的ReviewItem模板直接并列了三个<p>标签，没有根容器，是导致DOM渲染异常的核心原因。同时需要修复错误的属性绑定写法：

<template>
  <!-- 新增div作为唯一根节点 -->
  <div class="review-item">
    <p>Review</p>
    <!-- 修复错误的v-bind写法，用插值语法显示评论内容 -->
    <p class="review">{{ comment }}</p>
    <p>Rating: <span v-for="star in rating" v-bind:key="star">⭐</span></p>
  </div>
</template>

2. 删除ReviewItem内部和props重名的data变量 #

你已经在props中声明了rating和comment，又在data里定义了同名变量，会触发变量覆盖冲突，违反Vue单项数据流规范，直接删掉组件内部的重名data字段即可，如果需要默认值可以在props里声明：

<script>
export default {
  name: 'ReviewItem',
  props: {
    rating: {
      type: Array,
      default: () => [1,1,1,1,1]
    },
    comment: {
      type: String,
      default: 'test comment'
    }
  }
}
</script>

3. 修复父组件的非规范自闭合textarea标签 #

HTML规范中textarea是必须有闭合标签的元素，不要写自闭合语法，避免渲染异常：

<div v-if="!isReviewed()">
  <!-- 改成完整闭合标签 -->
  <textarea rows="8" cols="35" name="comment" placeholder="Add review"></textarea>
  <br>
  <input type="text" name="rating" placeholder="Rating (1-5)" size="5" maxlength="1"/>
  <br><br>
  <button type="button">Add Review</button>
  <br><br>
</div>

4. 可选优化：isReviewed方法添加参数区分不同预订 #

你当前的isReviewed()固定返回true，所有预订都会显示评论组件，后续业务迭代时建议传入bookingId来判断单条预订是否已评论，避免所有预订共用同一个评论状态。

修改完成后重启项目即可正常渲染Bookings模块。

内容的提问来源于stack exchange，提问作者noumenal