Version
3.2.26
Reproduction link
sfc.vuejs.org/
Steps to reproduce
- Create an
@clickhandler - Generate an error in the actual handler
- Observe that Vue issues a warning «Unhandled error during execution of native event handler»
What is expected?
For the actual error to be surfaced/logged/exposed to make debugging easier
What is actually happening?
The warning doesn’t contain any meaningful information and makes debugging challenging.
I can’t seem to reproduce this in the SFC playground, as I see the actual error surfacing there (e.g. Cannot read properties of undefined (reading ‘defaultPrevented’)), but when I do something similar in my app Vue keeps reporting the warning «Unhandled error during execution of native event handler» and the actual error is not shown or logged.
You must have a problem with your project setup, as this is what I see:
…and you see a stack trace in the playground as well.
Feel free to open a new issue here (or maybe in the Vue CLI repo, depending on your setup?) when you have a runnable reproduction repository.
Or ask for help in the community at chat.vuejs.org
My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with event.preventDefault()
Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.
My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with
event.preventDefault()Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.
I’m facing the same issue and cannot seem to solve it. I get the same error over and over.
my html element has this attribute: @click="componentClicked"
and the method is in the «methods» object at the «script» section of the vue SFC.
componentClicked:(event)=>{ event.preventDefault(); console.log('Line clicked', event); this.$emit('line-click'); }
The componentClicked method works fine, and the «event» value is properly printed in the console. Apparently that component’s line this.$emit('line-click'); is the problem, this is the actual error I get, plus the warning you also had.
My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with
event.preventDefault()
Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.I’m facing the same issue and cannot seem to solve it. I get the same error over and over.
my html element has this attribute:
@click="componentClicked"and the method is in the «methods» object at the «script» section of the vue SFC.
componentClicked:(event)=>{ event.preventDefault(); console.log('Line clicked', event); this.$emit('line-click'); }The componentClicked method works fine, and the «event» value is properly printed in the console. Apparently that component’s line
this.$emit('line-click');is the problem, this is the actual error I get, plus the warning you also had.
Well, I finally found my mistake; I was calling «this» from an arrow function and not from the function itself… thus, «this» wasn’t accessible. I came up with this kind of error once and spent hours dealing with it, but this time I recalled about it and instantly realized.
I hope it will be useful for anyone who is perhaps facing the same issue.
1. How do you appear to have a ‘unhandled error during execution of component event handler’ warning?
The page layout is probably like this:
<template>
<div class="container">
// Search bar components
<search /> // Table components
<et-talble>
<template #action="row">
// To introduce button components in the Table table in the Table table, assume that there is only one editor, enable / disable buttons
<operation-btns
:row="row"
@edit="handleEdit"
@enable="handleEnable"
/>
</template>
</et-table>
</div>
</template>
// Remarks: No research is not studying the contents of the introduction component
<script>
// Let's put the file path of the component into the component
export default{
name:'xx',
components:{
search,
etTable,
operationBtns
},
data(){
return {
}
},
computed:{},
watch:{},
created(){},
methods:{
// edit
handleEdit(){
},
// Enable / disable
async handleEnable(row){
AWAIT THIS. $ confirm ('OK To enable / disable this data?', 'prompt', {
ConfirMButtonText: 'OK',
CancelButtonText: 'Cancel',
type:'warning',
})
.then(async ()=>{
// Treated related business logic here
await requestStatusApi();
This. $ message.success ('operation success ")
})
// Focus ***, if you have less Catch this, you will report the warner.
.catch(()=>{})
}
}
}
</script>
<style scoped lang="scss"></style>
2. How to understand this warning ‘Unhandled Error During Execution of Component Event Handler’
Unhandled ERROR DURING EXECUTION OF Component Event Handler Translated To: Unprocessed Errors during Component Event ProcessorsOperating procedures:
Click the Enable / Disable button, prompt the pop-up pop, then click the button
- Determine button - take normal business logic, no this warning.
- Cancel button - Interface Effect: Tips The pop-up window disappears, and then the warning content will appear.
Approach:
Is: this. $ Confirm () method does not process the event that the cancel button triggered, so you need catch to capture this error.
3. About this. $ ALERT Method Click to close the icon triggering callback method
<El-Button Type = "Text" @ Click = "Open"> Click to open the Alert pop-up </ EL-button>open(){
$ Alert ('Click the Alert pop-up ",' Title Name ', {
ConfirMButtonText: 'OK',
//
callback: () => {
// Click the closing icon in the pop-up window to trigger the event here
$ Message.info ('Click to close the icon ~~~')
}
})
.then(() => {
}).catch(()=>{
})
// $ confirm method is also the same
THIS. $ confirm ('text content', 'pop-up title ", {
ConfirMButtonText: 'OK',
CancelButtonText: 'Cancel',
type:'warning'
}).then(()=>{
// Click OK will enter this
This. $ message.success ('operation success ")
}).catch(()=>{
// Click Cancellation to enter this
$ Message.info ('Cancel Success')
})
}
vuejs / core
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Home Page:https://vuejs.org/
Geek Repo:Geek Repo
Github PK Tool:Github PK Tool
adamreisnz opened this issue a year ago · comments
Version
3.2.26
Reproduction link
sfc.vuejs.org/
Steps to reproduce
- Create an
@clickhandler - Generate an error in the actual handler
- Observe that Vue issues a warning «Unhandled error during execution of native event handler»
What is expected?
For the actual error to be surfaced/logged/exposed to make debugging easier
What is actually happening?
The warning doesn’t contain any meaningful information and makes debugging challenging.
I can’t seem to reproduce this in the SFC playground, as I see the actual error surfacing there (e.g. Cannot read properties of undefined (reading ‘defaultPrevented’)), but when I do something similar in my app Vue keeps reporting the warning «Unhandled error during execution of native event handler» and the actual error is not shown or logged.
You must have a problem with your project setup, as this is what I see:
…and you see a stack trace in the playground as well.
Feel free to open a new issue here (or maybe in the Vue CLI repo, depending on your setup?) when you have a runnable reproduction repository.
Or ask for help in the community at chat.vuejs.org
My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with event.preventDefault()
Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.
My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with
event.preventDefault()Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.
I’m facing the same issue and cannot seem to solve it. I get the same error over and over.
my html element has this attribute: @click="componentClicked"
and the method is in the «methods» object at the «script» section of the vue SFC.
componentClicked:(event)=>{ event.preventDefault(); console.log('Line clicked', event); this.$emit('line-click'); }
The componentClicked method works fine, and the «event» value is properly printed in the console. Apparently that component’s line this.$emit('line-click'); is the problem, this is the actual error I get, plus the warning you also had.
My bad, you were right this was environmental. Turned out the event default was being prevented in the unhandledrejection listener with
event.preventDefault()
Sorry for the noise, will leave this up in case someone else stumbles upon a similar issue.I’m facing the same issue and cannot seem to solve it. I get the same error over and over.
my html element has this attribute:
@click="componentClicked"and the method is in the «methods» object at the «script» section of the vue SFC.
componentClicked:(event)=>{ event.preventDefault(); console.log('Line clicked', event); this.$emit('line-click'); }The componentClicked method works fine, and the «event» value is properly printed in the console. Apparently that component’s line
this.$emit('line-click');is the problem, this is the actual error I get, plus the warning you also had.
Well, I finally found my mistake; I was calling «this» from an arrow function and not from the function itself… thus, «this» wasn’t accessible. I came up with this kind of error once and spent hours dealing with it, but this time I recalled about it and instantly realized.
I hope it will be useful for anyone who is perhaps facing the same issue.