component problem
Mar 14th 2023
Vue version
3.2.45
Link to minimal reproduction
code in the steps.
Steps to reproduce
there is parent component code.
...
<el-dialog title="修改" :form="updateForm" v-model="updateDialogFormVisible">
<UserUpdate :form="updateForm" @success="get" @cancel="updateDialogFormVisible = false" />
</el-dialog>
...
data() {
return {
updateForm: {},
updateDialogFormVisible: false,
}
},
...
there is child component code.
...
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="http://localhost:5000/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.imgUrl" :src="form.imgUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="注册时间">
<el-input :model="form.date" disabled></el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="form.name" disabled></el-input>
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="form.nick"></el-input>
</el-form-item>
<!-- <el-form-item label="性别">
<el-input v-model="form.sex"></el-input>
</el-form-item>
<el-form-item label="生日">
<el-input v-model="form.birth"></el-input>
</el-form-item> -->
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="this.$emit('cancel')">取 消</el-button>
<el-button @click="update">确定</el-button>
</div>
...
prop: ['form'],
emits: ['success','cancel'],
data() {
return {
}
},
...
there is error when i set updateDialogFormVisible = true.
[Vue warn]: Property "form" was accessed during render but is not defined on instance.
at <UserUpdateView form= {imgUrl: '', date: ''} onSuccess=fn<bound get> onCancel=fn >
at <ElDialogContent key=0 ref_key="dialogContentRef" ref=Ref< undefined > ... >
at <ElFocusTrap loop="" trapped=true focus-start-el="container" ... >
at <ElOverlay custom-mask-event="" mask=true overlay-class=undefined ... >
at <BaseTransition onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> onBeforeLeave=fn<beforeLeave> ... >
at <Transition name="dialog-fade" onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> ... >
at <ElDialog title="修改" form= {imgUrl: '', date: ''} modelValue=true ... >
at <UserView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {get: ƒ, handleCurrentChange: ƒ, del: ƒ, update: ƒ, …} > >
at <RouterView>
at <ElMain>
at <ElContainer>
at <MenuBicycleRentalView key=0 >
at <App>
[Vue warn]: Extraneous non-props attributes (form) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <UserUpdateView form= {imgUrl: '', date: ''} onSuccess=fn<bound get> onCancel=fn >
at <ElDialogContent key=0 ref_key="dialogContentRef" ref=Ref< undefined > ... >
at <ElFocusTrap loop="" trapped=true focus-start-el="container" ... >
at <ElOverlay custom-mask-event="" mask=true overlay-class=undefined ... >
at <BaseTransition onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> onBeforeLeave=fn<beforeLeave> ... >
at <Transition name="dialog-fade" onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> ... >
at <ElDialog title="修改" form= {imgUrl: '', date: ''} modelValue=true ... >
at <UserView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {get: ƒ, handleCurrentChange: ƒ, del: ƒ, update: ƒ, …} > >
at <RouterView>
at <ElMain>
at <ElContainer>
at <MenuBicycleRentalView key=0 >
at <App>
[Vue warn]: Property "form" was accessed during render but is not defined on instance.
at <ElUploadContent key=1 ref_key="uploadRef" ref=Ref< undefined > ... >
at <ElUpload class="avatar-uploader" action="http://localhost:5000/upload" show-file-list=false ... >
at <ElFormItem label="头像" >
at <ElForm ref="form" model=undefined label-width="80px" >
at <UserUpdateView form= {imgUrl: '', date: ''} onSuccess=fn<bound get> onCancel=fn >
at <ElDialogContent key=0 ref_key="dialogContentRef" ref=Ref< undefined > ... >
at <ElFocusTrap loop="" trapped=true focus-start-el="container" ... >
at <ElOverlay custom-mask-event="" mask=true overlay-class=undefined ... >
at <BaseTransition onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> onBeforeLeave=fn<beforeLeave> ... >
at <Transition name="dialog-fade" onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> ... >
at <ElDialog title="修改" form= {imgUrl: '', date: ''} modelValue=true ... >
at <UserView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {get: ƒ, handleCurrentChange: ƒ, del: ƒ, update: ƒ, …} > >
at <RouterView>
at <ElMain>
at <ElContainer>
at <MenuBicycleRentalView key=0 >
at <App>
[Vue warn]: Unhandled error during execution of render function
at <ElUploadContent key=1 ref_key="uploadRef" ref=Ref< undefined > ... >
at <ElUpload class="avatar-uploader" action="http://localhost:5000/upload" show-file-list=false ... >
at <ElFormItem label="头像" >
at <ElForm ref="form" model=undefined label-width="80px" >
at <UserUpdateView form= {imgUrl: '', date: ''} onSuccess=fn<bound get> onCancel=fn >
at <ElDialogContent key=0 ref_key="dialogContentRef" ref=Ref< undefined > ... >
at <ElFocusTrap loop="" trapped=true focus-start-el="container" ... >
at <ElOverlay custom-mask-event="" mask=true overlay-class=undefined ... >
at <BaseTransition onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> onBeforeLeave=fn<beforeLeave> ... >
at <Transition name="dialog-fade" onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> ... >
at <ElDialog title="修改" form= {imgUrl: '', date: ''} modelValue=true ... >
at <UserView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {get: ƒ, handleCurrentChange: ƒ, del: ƒ, update: ƒ, …} > >
at <RouterView>
at <ElMain>
at <ElContainer>
at <MenuBicycleRentalView key=0 >
at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <ElUploadContent key=1 ref_key="uploadRef" ref=Ref< undefined > ... >
at <ElUpload class="avatar-uploader" action="http://localhost:5000/upload" show-file-list=false ... >
at <ElFormItem label="头像" >
at <ElForm ref="form" model=undefined label-width="80px" >
at <UserUpdateView form= {imgUrl: '', date: ''} onSuccess=fn<bound get> onCancel=fn >
at <ElDialogContent key=0 ref_key="dialogContentRef" ref=Ref< undefined > ... >
at <ElFocusTrap loop="" trapped=true focus-start-el="container" ... >
at <ElOverlay custom-mask-event="" mask=true overlay-class=undefined ... >
at <BaseTransition onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> onBeforeLeave=fn<beforeLeave> ... >
at <Transition name="dialog-fade" onAfterEnter=fn<afterEnter> onAfterLeave=fn<afterLeave> ... >
at <ElDialog title="修改" form= {imgUrl: '', date: ''} modelValue=true ... >
at <UserView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {get: ƒ, handleCurrentChange: ƒ, del: ƒ, update: ƒ, …} > >
at <RouterView>
at <ElMain>
at <ElContainer>
at <MenuBicycleRentalView key=0 >
at <App>
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'imgUrl')
at UserUpdateView.vue:10:33
at renderFnWithContext (runtime-core.esm-bundler.js:868:19)
at renderSlot (runtime-core.esm-bundler.js:3025:55)
at upload.vue:124:2
at renderFnWithContext (runtime-core.esm-bundler.js:868:19)
at renderSlot (runtime-core.esm-bundler.js:3025:55)
at Proxy.<anonymous> (upload-content.vue:190:2)
at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'imgUrl')
at UserUpdateView.vue:10:33
at renderFnWithContext (runtime-core.esm-bundler.js:868:19)
at renderSlot (runtime-core.esm-bundler.js:3025:55)
at upload.vue:124:2
at renderFnWithContext (runtime-core.esm-bundler.js:868:19)
at renderSlot (runtime-core.esm-bundler.js:3025:55)
at Proxy.<anonymous> (upload-content.vue:190:2)
at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'imgUrl')
at UserUpdateView.vue:10:33
at renderFnWithContext (runtime-core.esm-bundler.js:868:19)
at renderSlot (runtime-core.esm-bundler.js:3025:55)
at upload.vue:124:2
at renderFnWithContext (runtime-core.esm-bundler.js:868:19)
at renderSlot (runtime-core.esm-bundler.js:3025:55)
at Proxy.<anonymous> (upload-content.vue:190:2)
at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
What is expected?
show the dialog and update form.
What is actually happening?
there is a error, and the warnning lead me to issue a problem.
System Info
No response
Any additional comments?
No response
Mar 14th 2023
We can't investigate such issues without a runnable reproduction.