ElementUI——报错汇总

最新推荐文章于 2025-06-03 00:09:15 发布

weixin_30384031

最新推荐文章于 2025-06-03 00:09:15 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyang0210/p/11540915.html

本文详细解析了ElementUI中动态添加删除表单时出现的'pleasetransferavalidproppathtoformitem!'错误。通过对比源码与修复后的代码，指出问题所在并给出解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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开始的,所以肯定找不到了

转载于:https://www.cnblogs.com/wangyang0210/p/11540915.html