ElementUI——报错汇总
前言
elementUI的报错汇总
错误
please transfer a valid prop path to form item!
vue.esm.js?c5de:628 [Vue warn]: Error in mounted hook: "Error: please transfer a valid prop path to form item!" found in ---> <ElFormItem> at packages/form/src/form-item.vue <ElForm> at packages/form/src/form.vue <StaffInfo> at src/pages/system/staffManage/components/staffInfo.vue <ElDialog> at packages/dialog/src/component.vue <DepartmentManage> at src/pages/system/staffManage/departmentManage.vue <Main> at src/pages/system/main.vue <Main> at src/pages/main.vue <App> at src/App.vue <Root> warn @ vue.esm.js?c5de:628 logError @ vue.esm.js?c5de:1893 globalHandleError @ vue.esm.js?c5de:1888 handleError @ vue.esm.js?c5de:1848 invokeWithErrorHandling @ vue.esm.js?c5de:1871 callHook @ vue.esm.js?c5de:4222 insert @ vue.esm.js?c5de:3148 invokeInsertHook @ vue.esm.js?c5de:6351 patch @ vue.esm.js?c5de:6570 Vue._update @ vue.esm.js?c5de:3951 updateComponent @ vue.esm.js?c5de:4069 get @ vue.esm.js?c5de:4482 run @ vue.esm.js?c5de:4557 flushSchedulerQueue @ vue.esm.js?c5de:4313 (anonymous) @ vue.esm.js?c5de:1989 flushCallbacks @ vue.esm.js?c5de:1915 Promise.then (async) timerFunc @ vue.esm.js?c5de:1942 nextTick @ vue.esm.js?c5de:1999 queueWatcher @ vue.esm.js?c5de:4405 update @ vue.esm.js?c5de:4547 notify @ vue.esm.js?c5de:739 mutator @ vue.esm.js?c5de:891 addCard @ staffInfo.vue?2ad2:215 invokeWithErrorHandling @ vue.esm.js?c5de:1863 invoker @ vue.esm.js?c5de:2188 invokeWithErrorHandling @ vue.esm.js?c5de:1863 Vue.$emit @ vue.esm.js?c5de:3891 handleClick @ element-ui.common.js?1a2a:9169 invokeWithErrorHandling @ vue.esm.js?c5de:1863 invoker @ vue.esm.js?c5de:2188 original._wrapper @ vue.esm.js?c5de:7559 vue.esm.js?c5de:1897 Error: please transfer a valid prop path to form item! at getPropByPath (util.js?6b81:73) at VueComponent.fieldValue (element-ui.common.js?1a2a:23052) at Watcher.get (vue.esm.js?c5de:4482) at Watcher.evaluate (vue.esm.js?c5de:4587) at VueComponent.computedGetter [as fieldValue] (vue.esm.js?c5de:4839) at VueComponent.mounted (element-ui.common.js?1a2a:23196) at invokeWithErrorHandling (vue.esm.js?c5de:1863) at callHook (vue.esm.js?c5de:4222) at Object.insert (vue.esm.js?c5de:3148) at invokeInsertHook (vue.esm.js?c5de:6351)
动态添加删除表单的时候报错
https://element.eleme.io/#/zh-CN/component/form
源码
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' +(++index)" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> <el-button @click="addDomain">新增域名</el-button> <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> </el-form-item> </el-form> <script> export default { data() { return { dynamicValidateForm: { domains: [{ value: '' }], email: '' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { this.dynamicValidateForm.domains.push({ value: '', key: Date.now() }); } } } </script>
修复
<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" //修改 :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item>
原因
index进行++操作后,下面的index都是从1开始的,所以肯定找不到了
学无止境,谦卑而行.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 用 C# 插值字符串处理器写一个 sscanf
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
2018-09-18 VMware——报错汇总