0
141
ViewsIssue with multiple custom events firing, second event not working in Vue
I am emitting two different custom events from child, and for some reason the second event doesn't work.
I have checked on the Vue console and both events are being fired, however, nothing happens for the second event. When I comment out the first one, the second works correctly, as if the first one was blocking the second one.
<child-component
@upload="handleUpload"
@uploading="mediaUploading"
/>
methods: {
handleUpload(response) { //doesn't work
this.mediaLoading = false;
console.log(this.mediaLoading);
},
mediaUploading() { //works
this.mediaLoading = true;
},
}
In child component
this.$emit('uploading');
try {
data = await this.$api.get('/photo');
} catch (e) {
console.log(e)
}
this.$emit('upload', data);
·
Juan Pablo Isaza
1 answers
Answer question0
i have pasted the code on my machine and both are working fine
parent
<template>
<child-component @upload="handleUpload" @uploading="mediaUploading" />
</template>
<script>
import childComponent from "./page4child.vue";
export default {
components: {
childComponent,
},
data() {
return {
mediaLoading: true,
};
},
methods: {
handleUpload(response) {
//works
this.mediaLoading = false;
console.log(this.mediaLoading);
},
mediaUploading() {
//works
this.mediaLoading = true;
console.log(this.mediaLoading);
},
},
};
</script>
Child
<template>
<div>
<button @click="trigger('item')">run</button>
</div>
</template>
<script>
export default {
methods: {
async trigger(uploadedItem) {
this.$emit("uploading");
await new Promise((res) => {
console.log("duck");
res();
});
this.$emit("upload", uploadedItem);
},
},
};
</script>
·
Juan Pablo Isaza
Report
Answer question