Блог

Я работаю над приложением vuejs, которое требует создания раздела и подраздела

Я попытался создать подраздел, нажав на раздел «Добавить подраздел», но это приводит к ошибке

 Uncaught TypeError: sections[1] is undefined  

Шаблон

Это шаблон, который отображает разделы и подразделы на странице

 lt;div v-if="sections.length gt; 0 "gt;  lt;div class="__course-sub-section" v-for="(section, index) in sections" :key="index"gt;  lt;divgt;lt;input type="text" placeholder="Enter Section Title" v-model="section.title" class="section-title form-control x_focus"gt;lt;/divgt;  lt;div class="__upload-section d-flex justify-content-between align-items-center" v-for="(sub_section, index) in section.sub_sections" :key="index"gt;  lt;div class="d-flex"gt;  lt;input type="text" placeholder="Enter Sub Section Title" v-model="sub_section.title" class="section-title form-control x_focus"gt;  lt;div class="__choose"gt;  lt;label for=""gt;  lt;divgt;  lt;input type="file" @change="uploadFile( $event )" name="" id=""gt;  Upload File  lt;/divgt;  lt;img src="@/assets/images/upload.png" alt=""gt;  lt;/labelgt;    lt;/divgt;  lt;/divgt;  lt;div class="__sub-section-image"gt;  lt;div class="placeholder"gt;  lt;img :src="sub_section.url" alt=""gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;button @click="addSubSection" class="app_button primary_btn d-flex mt-4"gt;  Add Sub Section  lt;/buttongt;  lt;button @click="addSection" class="app_button primary_btn d-flex mt-4"gt;  Add Section  lt;/buttongt;  

язык JavaScript

Это javascript(vue), который хранит форму в массиве и отображает их.

 export default {  name: 'CreateCourse',  setup(){  const sections = reactive([{'title': '', 'sub_sections': [{'title': '', 'file': '', 'url': ''}]}]);  const addSection = () =gt; {  sections.push({"title": "", 'sub_sections': [{'title': '', 'file': '', 'url': ''}]});  }  const addSubSection = () =gt; {    sections[1].sub_sections.push({"title": "", 'file': '', 'url': ''});  }   const uploadFile = (e) =gt; {  console.log(e.target.files[0]);  sections[1].sub_sections[1].file = e.target.files[0];  sections[1].sub_sections[1].url = URL.createObjectURL(sections[1].sub_sections[1].file);  }  return {  sections  }  } }  

Как мне решить эту проблему?

Вам нужно возвращать функции из setup функции и передавать индекс в addSubSection функцию:

 lt;scriptgt; import { reactive } from "vue";   export default {  name: 'CreateCourse',  setup(){  const sections = reactive([{'title': '', 'sub_sections': [{'title': '', 'file': '', 'url': ''}]}]);  const addSection = () =gt; {  sections.push({"title": "", 'sub_sections': [{'title': '', 'file': '', 'url': ''}]});  }  const addSubSection = (idx) =gt; {   sections[idx].sub_sections.push({"title": "", 'file': '', 'url': ''});  }  const uploadFile = (e, idx, i) =gt; {  console.log(e.target.files[0]);  sections[idx].sub_sections[i].file = e.target.files[0];  sections[idx].sub_sections[i].url = URL.createObjectURL(sections[idx].sub_sections[i].file);  }  return { sections, addSection, addSubSection, uploadFile }  } } lt;/scriptgt; 

 lt;templategt;  lt;div v-if="sections.length gt; 0 "gt;  lt;div class="__course-sub-section" v-for="(section, index) in sections" :key="index"gt;  lt;divgt;  lt;input type="text" placeholder="Enter Section Title" v-model="section.title" class="section-title form-control x_focus"gt;  lt;/divgt;  lt;div class="__upload-section d-flex justify-content-between align-items-center" v-for="(sub_section, idx) in section.sub_sections" :key="idx"gt;  lt;div class="d-flex"gt;  lt;input type="text" placeholder="Enter Sub Section Title" v-model="sub_section.title" class="section-title form-control x_focus"gt;  lt;div class="__choose"gt;  lt;label for=""gt;  lt;divgt;  lt;input type="file" @change="uploadFile( $event , index, idx)" name="" id=""gt;  Upload File  lt;/divgt;  lt;img src="" alt=""gt;  lt;/labelgt;  lt;/divgt;  lt;/divgt;  lt;div class="__sub-section-image"gt;  lt;div class="placeholder"gt;  lt;img :src="sub_section.url" alt=""gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;button @click="addSubSection(index)" class="app_button primary_btn d-flex mt-4"gt;  Add Sub Section  lt;/buttongt;  lt;button @click="addSection" class="app_button primary_btn d-flex mt-4"gt;  Add Section  lt;/buttongt;  lt;/divgt;  lt;/divgt; lt;/templategt; 

Попробуй это:

 const sections = reactive([  { title: "", sub_sections: [{ title: "", file: "", url: "" }] },  { title: "", sub_sections: [{ title: "", file: "", url: "" }] }, ]);