Vue warn - Cannot read property indexOf of undefined

Question

At first to point, i have seen a lot of similar problems here on stackoverlow, but no one is relatable to this example...

I am working on Vue JS project + Laravel so everything was going smoothly but suddenly i got error that cannot solve (from my perspective everything is correct).

Basically I am using Vuesax library too.

So i have projects table with edit button @click="editProject(project) and the called method is...

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
}

So in that moment... showEditProject = true will bring me the modal with the form filled by props data

<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>

So I am looping through the data (statuses, colors, priorities, members, teams) and filling the form.

So with priorities there is no any problem, also with statuses and colors, but i have problem with members and teams.

<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>

Same approach is for all of them, but error appear only when members and teams are available - if i comment them - no problem. I get 4 errors per member/team (bellow)

[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)

Data is displayed without any problem - so form is properly filled but console i full with the previously explained errors.

UPDATE: Props in EditProject Component (Modal)

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

Members and Teams pictures bellow

Do you have the "vue devtools" extension? i would recommend you to look there and see that the you are passing the correct props, perhaps you are passing 'undefined' instead of an array? — Liad, Jun 04 '21 at 13:06

score 1 · Accepted Answer · answered Jun 05 '21 at 18:02

Basically after good review and research of the code, i found that EditProject modal is displayed but because there is no data passed, it cause the error while trying to loop undefined members and teams.

So simple solution, to prevent EditProject component/modal to be loaded, i have added also 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>

Vue warn - Cannot read property indexOf of undefined

1 Answers1