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开始的,所以肯定找不到了
ElementUI——报错汇总的更多相关文章
- Ambari集成Kerberos报错汇总
Ambari集成Kerberos报错汇总 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看报错的配置信息步骤 1>.点击Test Kerberos Client,查看相 ...
- Python_环境部署及报错汇总(0)
一.安装Anaconda Anaconda是一个开源的包.环境管理器,可以用于在同一个机器上安装不同版本的软件包及其依赖,并能够在不同的环境之间切换. Anaconda包括Conda.Python以及 ...
- selenium报错汇总
selenium报错汇总 报错:[error] Could not connect to Selenium Server. Have you started the Selenium Server y ...
- Ubuntu操作系统编译安装zabbix报错汇总
Ubuntu操作系统编译安装zabbix报错汇总 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.报错提示:"configure: error: MySQL libra ...
- 按需引入element-ui报错
按需引入element-ui报错 项目用的脚手架是 vue-cli 3 按照官方文档按需引入组件: https://element.eleme.cn/#/zh-CN/component/quickst ...
- TypeError: value.getTime is not a function (elementUI报错转载 )
"TypeError: value.getTime is not a function" 2018年07月02日 16:41:24 leeleejoker 阅读数:2091 标签: ...
- vue2.0+按需引入element-ui报错
项目使用vue脚手架自动生成的,vue版本为^2.5.16.项目中需要按需使用element-ui,根据element-ui的官方文档,一开始在babel.config.js文件中修改配置 modul ...
- vue-cli3 按需引入 element-ui 报错
报错信息: Cannot find module 'babel-preset-es2015' from .... 解决办法: 安装最新的 Babel 编译插件:@babel/preset-env 修改 ...
- iOS 报错汇总
1. Unknown type name 'class'; did you mean 'Class' 问题解决方法 objectice-c 工程中的类(比如 类 A)使用 C++ 文件时 A.m 文 ...
随机推荐
- turtle1
#画风车 from turtle import * pensize(2) for i in range(4): seth(360-i*90) fd(150) rt(90) circle(-150,45 ...
- [转帖]linux下安装7z命令及7z命令的使用
linux下安装7z命令及7z命令的使用 https://www.cnblogs.com/yiwd/p/3649094.html yum install p7zip 执行命令为 7za x 或者是 7 ...
- 洛谷P5022 旅行 题解
前面几个代码都是部分分代码,最后一个才是AC了的,所以最后一个有详细注释 安利一发自己的Blog 这是提高组真题,233有点欧拉回路的感觉. 题目大意: 一个 连通 图,双向边 ,无重边 , 访问图中 ...
- HTTP: Request中的post和get区别
* GET和POST之间的主要区别 1.GET是从服务器上获取数据,POST是向服务器传送数据. 2.在客户端, get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段 ...
- Python 基础 编码
Python 基础 编码 咱们的电脑,存储和发送文件,发送的是什么?电脑里面是不是有成千上万个二极管,亮的代表是1,不亮的代表是0,这样实际上电脑的存储和发送是不是都是010101啊 我们发送的内容都 ...
- 四种方法获取可执行程序的文件路径(.NET Core / .NET Framework)
原文:四种方法获取可执行程序的文件路径(.NET Core / .NET Framework) 本文介绍四种不同的获取可执行程序文件路径的方法.适用于 .NET Core 以及 .NET Framew ...
- .NET 的程序集加载上下文
原文:.NET 的程序集加载上下文 我们编写的 .NET 应用程序会使用到各种各样的依赖库.我们都知道 CLR 会在一些路径下帮助我们程序找到依赖,但如果我们需要手动控制程序集加载路径的话,需要了解程 ...
- C# vb .net实现颜色替换效果滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的颜色替换效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- 变量.argsort()的用法
a=[1,2,5,9,7,3]a=np.array(a)order = a.argsort() # 从小到大排序,并返回索引值print('order=',order)order1= a.argsor ...
- Jquery 跨Dom窗口操作
. 子窗口给父窗口元素赋值 function modifyTheme(id){ $("#parent_dom",window.parent.document).attr(" ...