Vue迭代JSON数据无法正常显示问题求助

问题根源 #

1. mainContainer.vue数据冲突：你同时导入了本地JSON文件并定义了同名的skills props，导致数据混淆，无法正确传递有效数据给子组件。
2. 子组件数组访问错误：skill.frontend和skill.backend是数组类型，而非单个对象，直接访问.name会返回undefined，自然无法显示内容。

修改方案 #

1. 修复mainContainer.vue

移除多余的props定义（因为是本地导入JSON，无需父组件传值），直接传递JSON中的技能对象：

<template>
  <!-- 因为skills数组仅包含1个元素，直接取第一个传递 -->
  <Skills :skill="skills.skills[0]" :key="skills.skills[0].name"/>
</template>

<script setup>
import Skills from './mainContainerSkills.vue';
import skills from "../Skills.json";
</script>

如果后续skills数组会新增多个元素，可保留v-for遍历：

<template>
  <Skills v-for="skillItem in skills.skills" :skill="skillItem" :key="skillItem.name"/>
</template>

2. 修改mainContainerSkills.vue

对frontend和backend数组分别遍历，逐个展示技能名称：

<template>
  <div>
    <!-- Frontend技能列表 -->
    <div>
      <h3>Frontend</h3>
      <div v-for="skillItem in skill.frontend" :key="skillItem.id">
        <p>{{ skillItem.name }}</p>
      </div>
    </div>

    <!-- Backend技能列表 -->
    <div>
      <h3>Backend</h3>
      <div v-for="skillItem in skill.backend" :key="skillItem.id">
        <p>{{ skillItem.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    skill: {
      default: null,
      type: Object,
    }
  }
}
</script>

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