在vuejs中創建子部分不起作用

我正在開發需要創建部分和子部分的 vuejs 應用程式

我嘗試通過單擊添加子部分來創建子部分，但它給了我錯誤

Uncaught TypeError: sections[1] is undefined

模板

這是在頁面上顯示部分和子部分的模板

<div v-if="sections.length > 0 ">
                    <div  v-for="(section, index) in sections" :key="index">
                    <div><input type="text" placeholder="Enter Section Title" v-model="section.title" ></div>
                        <div  v-for="(sub_section, index) in section.sub_sections" :key="index">
                            <div >
                                <input type="text" placeholder="Enter Sub Section Title" v-model="sub_section.title"  >
                            <div >
                                <label for="">
                                    <div>
                                        <input type="file" @change="uploadFile( $event )" name="" id="">
                                        Upload File
                                    </div>
                                    <img src="@/assets/images/upload.png" alt="在 vuejs 中創建子部分不起作用">
                                </label>
                                    
                            </div>
                        </div>
                        <div >
                            <div >
                                <img :src="sub_section.url"  alt="在 vuejs 中創建子部分不起作用">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button @click="addSubSection" >
                Add Sub Section
            </button>
            <button @click="addSection" >
                Add Section
            </button>

javascript

這是將表單存盤在陣列上并顯示它們的 javascript(vue)。

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 = () => {
            
            sections[1].sub_sections.push({"title": "", 'file': '', 'url': ''});
        }

        const uploadFile = (e) => {
            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
    }
  }
}

我該如何解決這個問題？

uj5u.com熱心網友回復：

您需要從setup函式回傳函式，并將索引傳遞給addSubSection函式：

<script>
import { reactive } from "vue";
  
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 = (idx) => {   
      sections[idx].sub_sections.push({"title": "", 'file': '', 'url': ''});
    }
    const uploadFile = (e, idx, i) => {
      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 }
  }
}
</script>

<template>
  <div v-if="sections.length > 0 ">
    <div class="__course-sub-section" v-for="(section, index) in sections" :key="index">
      <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, idx) in section.sub_sections" :key="idx">
        <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 , index, idx)" name="" id="">
                Upload File
              </div>
              <img src="" alt="">
            </label>
          </div>
        </div>
        <div class="__sub-section-image">
          <div class="placeholder">
            <img :src="sub_section.url"  alt="">
          </div>
        </div>
      </div>
      <button @click="addSubSection(index)" class="app_button primary_btn d-flex mt-4">
        Add Sub Section
      </button>
      <button @click="addSection" class="app_button primary_btn d-flex mt-4">
        Add Section
      </button>
    </div>
  </div>
</template>

uj5u.com熱心網友回復：

嘗試這個：

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

標籤：数组 Vue.js 文件

上一篇：vuejs使用搜索欄過濾

下一篇：將復選框的字串轉換為布林值