Vue警告-無法讀取未定義的屬性indexOf

Question

首先，我在stackoverlow上看到了很多類似的問題，但沒有人與這個例子相關......

我正在開發 Vue JS 項目 + Laravel，所以一切都很順利，但突然我遇到了無法解決的錯誤（從我的角度來看，一切都是正確的）。

基本上我也在使用 Vuesax 庫。

所以我有帶有編輯按鈕@click="editProject(project)的項目表，並且被調用的方法是......

editProject(project) {
    let membersIds = []
    let teamsIds = []

    project.members.forEach(member => membersIds.push(member.id))
    project.groups.forEach(team => teamsIds.push(team.id))

    this.editProjectData = {
        name: project.name,
        start_date: project.start_date,
        deadline: project.deadline,
        members: membersIds,
        teams: teamsIds,
        status: project.status,
        priority: project.priority,
        description: project.description,
        color: project.color,
        visibility: project.visibility
    }
    this.showEditProject = true
}

所以在那一刻...... showEditProject = true將為我帶來由props數據填充的表單

<transition name="slide-right">
    <EditProject :project-data="editProjectData" :all-statuses="allStatuses" :all-priorities="allPriorities" :all-colors="allColors" :all-members="allMembers" :all-teams="allTeams" v-show="showEditProject"/>
</transition>

所以我遍歷數據（狀態、colors、優先級、成員、團隊）並填寫表格。

因此，優先級沒有任何問題，狀態和 colors 也是如此，但我對成員和團隊有問題。

<div class="w-full mb-3">
    <vs-select multiple :label="$t('work.projects.edit-project-modal.members')" v-model="projectData.members" color="#91C959" style="width: 100%;">
        <vs-select-item :key="member.id" :value="member.id" :text="member.firstname + ' ' + member.lastname" v-for="member in allMembers" />
    </vs-select>
</div>

相同的方法適用於所有人，但只有在成員和團隊可用時才會出現錯誤 - 如果我評論他們 - 沒問題。 每個成員/團隊有 4 個錯誤（如下）

[Vue warn]: Error in render: "TypeError: Cannot read property 'indexOf' of undefined"

found in

---> <VsSelectItem>
       <VsSelect>
         <Modal> at resources/js/components/Modal.vue
           <EditProject> at resources/js/components/Work/Projects/EditProject.vue
             <Projects> at resources/js/views/Projects.vue
               <App> at resources/js/App.vue
                 <Root>

TypeError: Cannot read property 'indexOf' of undefined
    at Proxy.vsSelectItemvue_type_template_id_681b8e3f_lang_html_render (app.js:52554)
    at VueComponent.Vue._render (app.js:41589)
    at VueComponent.updateComponent (app.js:42107)
    at Watcher.get (app.js:42520)
    at new Watcher (app.js:42509)
    at mountComponent (app.js:42114)
    at VueComponent.Vue.$mount (app.js:47091)
    at VueComponent.Vue.$mount (app.js:50000)
    at init (app.js:41162)
    at createComponent (app.js:44017)

[Vue warn]: Error in render: "TypeError: Cannot read property 'indexOf' of undefined"

found in

---> <VsSelectItem>
       <VsSelect>
         <Modal> at resources/js/components/Modal.vue
           <EditProject> at resources/js/components/Work/Projects/EditProject.vue
             <Projects> at resources/js/views/Projects.vue
               <App> at resources/js/App.vue
                 <Root>

app.js:39934 TypeError: Cannot read property 'indexOf' of undefined
    at Proxy.vsSelectItemvue_type_template_id_681b8e3f_lang_html_render (app.js:52554)
    at VueComponent.Vue._render (app.js:41589)
    at VueComponent.updateComponent (app.js:42107)
    at Watcher.get (app.js:42520)
    at new Watcher (app.js:42509)
    at mountComponent (app.js:42114)
    at VueComponent.Vue.$mount (app.js:47091)
    at VueComponent.Vue.$mount (app.js:50000)
    at init (app.js:41162)
    at createComponent (app.js:44017)

數據顯示沒有任何問題 - 因此表格已正確填寫，但控制台 i 已充滿前面解釋的錯誤。

更新：EditProject 組件中的道具（模態）

props: {
    projectData: {},
    allStatuses: {},
    allColors: {},
    allPriorities: {},
    allMembers: {},
    allTeams: {}
}

成員和團隊圖片如下

Answer 1

基本上在對代碼進行了良好的審查和研究之后，我發現顯示了EditProject模式，但是由於沒有傳遞數據，因此在嘗試循環未定義的成員和團隊時會導致錯誤。

如此簡單的解決方案，為了防止EditProject組件/模態，我還添加了v-if="showEditProject"

<transition name="slide-right">
    <EditProject v-if="showEditProject" v-show="showEditProject" :project-data="editProjectData" :all-statuses="allStatuses" :all-priorities="allPriorities" :all-colors="allColors" :all-members="allMembers" :all-teams="allTeams"/>
</transition>