Vue 警告 - 无法读取未定义的 属性 indexOf
Vue warn - Cannot read property indexOf of undefined
首先要指出的是,我在stackoverlow上看到了很多类似的问题,但是没有人对这个例子感兴趣table...
我正在开发 Vue JS 项目 + Laravel 所以一切都很顺利,但突然出现无法解决的错误(从我的角度来看,一切都是正确的)。
基本上我也在使用 Vuesax 库。
所以我的项目 table 带有编辑按钮 @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>
所以我正在遍历数据(状态、颜色、优先级、成员、团队)并填写表格。
所以优先级没有任何问题,状态和颜色也没有问题,但是我对成员和团队有问题。
<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>
同样的方法适用于他们所有人,但只有当成员和团队可用时才会出现错误 - 如果我评论他们 - 没问题。
每个 member/team(波纹管)
我得到 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)
数据显示没有任何问题 - 因此表格已正确填写,但控制台充满了之前解释的错误。
更新:
EditProject 组件中的道具(模态)
props: {
projectData: {},
allStatuses: {},
allColors: {},
allPriorities: {},
allMembers: {},
allTeams: {}
}
下面是成员和团队的照片
基本上在仔细审查和研究代码之后,我发现显示了 EditProject
模态,但由于没有传递数据,因此在尝试循环未定义的成员和团队时会导致错误。
如此简单的解决方案,为了防止加载 EditProject
component/modal,我还添加了 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>
首先要指出的是,我在stackoverlow上看到了很多类似的问题,但是没有人对这个例子感兴趣table...
我正在开发 Vue JS 项目 + Laravel 所以一切都很顺利,但突然出现无法解决的错误(从我的角度来看,一切都是正确的)。
基本上我也在使用 Vuesax 库。
所以我的项目 table 带有编辑按钮 @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>
所以我正在遍历数据(状态、颜色、优先级、成员、团队)并填写表格。
所以优先级没有任何问题,状态和颜色也没有问题,但是我对成员和团队有问题。
<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>
同样的方法适用于他们所有人,但只有当成员和团队可用时才会出现错误 - 如果我评论他们 - 没问题。 每个 member/team(波纹管)
我得到 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)
数据显示没有任何问题 - 因此表格已正确填写,但控制台充满了之前解释的错误。
更新: EditProject 组件中的道具(模态)
props: {
projectData: {},
allStatuses: {},
allColors: {},
allPriorities: {},
allMembers: {},
allTeams: {}
}
下面是成员和团队的照片
基本上在仔细审查和研究代码之后,我发现显示了 EditProject
模态,但由于没有传递数据,因此在尝试循环未定义的成员和团队时会导致错误。
如此简单的解决方案,为了防止加载 EditProject
component/modal,我还添加了 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>