Vue.js添加子章节功能失效：Uncaught TypeError: sections[1] is undefined问题排查与解决求助

我来帮你分析下问题所在，你遇到的Uncaught TypeError: sections[1] is undefined错误根源很明确——你的addSubSection函数直接硬编码访问了sections[1]，但初始状态下sections数组只有1个元素（索引为0），在你还没点击Add Section添加第二个章节之前，sections[1]根本不存在，自然会报错。

而且你的代码还有两个隐藏问题：

• 模板里绑定的addSection、addSubSection、uploadFile方法没有在setup的返回值里暴露出来，Vue会找不到这些方法（你贴的代码里return只给了sections）
• uploadFile函数同样硬编码了索引，不管用户在哪个子章节上传文件，都会修改第二个章节的第二个子章节，这显然不符合需求

下面是完整的修复方案：

第一步：重构模板，让Add Sub Section按钮绑定到对应章节 #

把Add Sub Section按钮放到每个章节的内部，这样点击时就能明确知道要给哪个章节添加子章节，同时传递章节的索引：

<div v-if="sections.length > 0 ">
  <div class="__course-sub-section" v-for="(section, sectionIndex) in sections" :key="sectionIndex">
    <div><input type="text" placeholder="Enter Section Title" v-model="section.title" class="section-title form-control x_focus"></div>
    <!-- 子章节列表 -->
    <div class="__upload-section d-flex justify-content-between align-items-center" v-for="(sub_section, subIndex) in section.sub_sections" :key="subIndex">
      <div class="d-flex">
        <input type="text" placeholder="Enter Sub Section Title" v-model="sub_section.title" class="section-title form-control x_focus">
        <div class="__choose">
          <label for="">
            <div>
              <!-- 上传文件时传递章节索引、子章节索引 -->
              <input type="file" @change="uploadFile($event, sectionIndex, subIndex)" name="" id=""> Upload File
            </div>
            <img src="@/assets/images/upload.png" alt="">
          </label>
        </div>
      </div>
      <div class="__sub-section-image">
        <div class="placeholder">
          <img :src="sub_section.url" alt="">
        </div>
      </div>
    </div>
    <!-- 每个章节单独的添加子章节按钮 -->
    <button @click="addSubSection(sectionIndex)" class="app_button primary_btn d-flex mt-2"> Add Sub Section to This Section </button>
  </div>
</div>
<!-- 添加新章节的按钮 -->
<button @click="addSection" class="app_button primary_btn d-flex mt-4"> Add Section </button>

第二步：修改JavaScript逻辑，移除硬编码索引，暴露方法 #

调整addSubSection和uploadFile函数，通过接收索引参数来操作对应的章节和子章节，同时记得把所有用到的方法暴露给模板：

export default {
  name: 'CreateCourse',
  setup(){
    const sections = reactive([{'title': '', 'sub_sections': [{'title': '', 'file': '', 'url': ''}]}]);
    
    const addSection = () => {
      sections.push({"title": "", 'sub_sections': [{'title': '', 'file': '', 'url': ''}]});
    };

    // 接收章节索引，给对应章节添加子章节
    const addSubSection = (sectionIndex) => {
      sections[sectionIndex].sub_sections.push({"title": "", 'file': '', 'url': ''});
    };

    // 接收事件、章节索引、子章节索引，更新对应子章节的文件信息
    const uploadFile = (e, sectionIndex, subIndex) => {
      const file = e.target.files[0];
      if (!file) return; // 防止用户取消选择文件
      sections[sectionIndex].sub_sections[subIndex].file = file;
      sections[sectionIndex].sub_sections[subIndex].url = URL.createObjectURL(file);
    };

    // 必须把所有需要在模板中使用的方法和状态返回
    return { sections, addSection, addSubSection, uploadFile };
  }
};

为什么这样修复？ #

• 移除了硬编码的索引，改为动态接收用户操作的章节/子章节索引，从根本上避免了undefined错误
• 每个章节单独绑定添加子章节按钮，交互逻辑更清晰，用户知道自己是给哪个章节加子章节
• 上传文件时精准定位到对应的子章节，不会再出现修改错误的子章节内容的问题
• 把所有方法都暴露给模板，确保Vue能正确找到并触发这些方法

这样修改后，你点击Add Section添加新章节，再点击对应章节的Add Sub Section按钮，就不会再出现sections[1] is undefined的错误了，上传文件的功能也能正确对应到操作的子章节。

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