VueJS中嵌套对象数组遍历失效，x-template渲染无数据求助

嘿，我帮你排查出问题啦，主要是几个小细节没处理到位，咱们来一步步修正：

核心问题分析 #

你当前的代码有两个关键问题导致数据无法渲染：

1. 根Vue实例错误地挂载到了<script type="x-template" id="article-content">标签上，Vue不能挂载到script标签，这会导致模板无法被组件正常读取，数据传递链路直接断裂。
2. 虽然组件声明了props接收article，但因为根实例挂载目标错误，组件根本拿不到有效的article.content数组。

修正后的完整代码 #

HTML部分 #

<!-- 根Vue实例的挂载容器，必须是普通DOM元素 -->
<div id="app">
  <article-content :key="article.id" :article="article"></article-content>
</div>

<!-- 组件的x-template模板，保持结构但不要作为挂载目标 -->
<script type="x-template" id="article-content">
  <!-- 给v-for循环的元素加上key，这是Vue的性能优化最佳实践 -->
  <article class="content__article" v-for="contentItem in article.content" :key="contentItem.id">
    <p class="id">{{ contentItem.id }}</p>
    <p class="type">{{ contentItem.type }}</p>
    <div v-html="contentItem.content"></div>
  </article>
</script>

JavaScript部分 #

// 根实例挂载到#app容器，而不是模板的id
const app = new Vue({
  el: "#app",
  data: {
    article: {
      id: '',
      publishDate: '',
      content: [] // 初始化为空数组
    }
  },
  mounted() {
    // 模拟XHR请求获取数据，替换成你实际的后端请求逻辑
    setTimeout(() => {
      this.article = {
        id: 'article-001',
        publishDate: '2024-05-20',
        content: [
          { id: 'item-1', type: 'paragraph', content: '<p>这是第一段文章内容</p>' },
          { id: 'item-2', type: 'image', content: '<img src="https://example.com/image.jpg" alt="示例图片">' },
          { id: 'item-3', type: 'quote', content: '<blockquote>这是一段引用内容</blockquote>' }
        ]
      };
    }, 1000);
  }
});

// 注册组件，确保props正确接收article数据
Vue.component('article-content', {
  template: '#article-content',
  props: ['article']
});

关键细节说明 #

• 挂载目标正确：根Vue实例必须挂载到可见的DOM元素（比如div#app），script标签只是模板的载体，不能作为挂载目标，否则会破坏模板结构，导致组件无法读取模板内容。
• v-for添加key：在循环的<article>元素上加上:key="contentItem.id"，帮助Vue高效识别每个元素的唯一性，避免不必要的DOM重渲染，提升页面性能。
• 响应式数据更新：当通过XHR获取到数据后，直接给this.article赋值新对象即可，Vue会自动监听对象的变化，并把更新后的数据同步传递给组件的props。
• props传递有效性：组件通过props: ['article']接收父组件（根实例）传递的数据，这样模板里的article.content就能正确遍历并渲染每一项内容了。

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