N
Nuxt•2mo ago
Kyllian

Emit not working

I use this to open a modal: 
    useModal().open(PanelModalsAddOrEditUser, {
        onUserAdded: (user: {}) => {
            console.log("Add hook");
            if (data.value && data.value.users) {
                data.value.users.push(user)
            }
        },
        onUserEdited: (user: {}) => {
            console.log("Edit hook");
        }
    })
    useModal().open(PanelModalsAddOrEditUser, {
        onUserAdded: (user: {}) => {
            console.log("Add hook");
            if (data.value && data.value.users) {
                data.value.users.push(user)
            }
        },
        onUserEdited: (user: {}) => {
            console.log("Edit hook");
        }
    })
Define my emits in AddOrEditUser: 
const emit = defineEmits<{
    (e: 'userAdded', user: {}): void;
    (e: 'userEdited', user: {}): void;
    (e: 'random') : void
}>();
const emit = defineEmits<{
    (e: 'userAdded', user: {}): void;
    (e: 'userEdited', user: {}): void;
    (e: 'random') : void
}>();
And then call them like this: 
if (props.user) {
            console.log("userEdited", response.user);
            emit('random');
            // emit('userEdited', response.user as IUser);
        } else {
            emit('userAdded', response.user as IUser);
        }
if (props.user) {
            console.log("userEdited", response.user);
            emit('random');
            // emit('userEdited', response.user as IUser);
        } else {
            emit('userAdded', response.user as IUser);
        }
Problem being, userAdded works perfectly fine. But userEdited or random does not. How can this happen?
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Kyllian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific details to fully explain why userEdited and random emits are not working while userAdded is. However, I can provide some general insights and suggestions based on Nuxt and Vue 3 emit behavior. 1. Emit naming consistency: Make sure that the emit names in your component match exactly with the ones you're listening for in the parent. In your case, you're listening for onUserEdited, but emitting userEdited. The naming should be consistent. 2. Watcher for reactive updates: As suggested in this Stack Overflow answer, using a watcher instead of onMounted hook can help ensure that emits are triggered when values change. While this might not be directly applicable to your modal scenario, it's a good practice for reactive updates. 3. Emit value passing: Ensure you're passing the correct value when emitting. In your code, you're passing response.user for both userAdded and userEdited emits. Make sure this object contains the expected data. 4. Debugging: Add console logs before each emit to ensure the code reaches that point. This can help identify if the issue is with the emit itself or if the code isn't being executed. 5. Modal specific considerations: Since you're using useModal() to open the modal, make sure that the modal component is properly set up to handle these emits. The Nuxt UI documentation on modals might be helpful for understanding how to properly set up and handle events in modals. 6. Reactivity across components: As mentioned in the Stack Overflow answer, "reactivity across components won't work". Make sure you're emitting the actual value, not a ref or reactive object. If these suggestions don't resolve the issue, you might need to create a minimal reproduction of the problem, as suggested in the Nuxt bug reporting guide. This would allow for a more detailed investigation of the specific issue you're facing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@166602211780984832> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Kyllian
KyllianOP•2mo ago
@kapa.ai im also testing with 'random' emit to simply log something, this also does not work. the console.log before the emit works fine.
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information you've provided and the previous context, it seems that there might be an issue with how the emits are being handled or received in your modal setup. Since you mentioned that even the 'random' emit is not working, while the console.log before it does, let's focus on potential reasons for this behavior. 1. Modal Event Handling: The issue might be related to how events are handled in the modal context. When using useModal() to open a modal in Nuxt, the event handling might differ from standard component communication. 2. Emit Naming in Modal Context: In your original code, you're using onUserAdded and onUserEdited as props when opening the modal. However, in your component, you're emitting userAdded and userEdited. This mismatch could be causing the issue. Try aligning the emit names with the prop names: 
const emit = defineEmits<{
    (e: 'onUserAdded', user: {}): void;
    (e: 'onUserEdited', user: {}): void;
    (e: 'onRandom') : void
}>();

// Then emit like this:
emit('onUserAdded', response.user as IUser);
emit('onUserEdited', response.user as IUser);
emit('onRandom');
const emit = defineEmits<{
    (e: 'onUserAdded', user: {}): void;
    (e: 'onUserEdited', user: {}): void;
    (e: 'onRandom') : void
}>();

// Then emit like this:
emit('onUserAdded', response.user as IUser);
emit('onUserEdited', response.user as IUser);
emit('onRandom');
3. Modal Closure and Event Propagation: Some modal implementations might interfere with normal event propagation. You could try using the modal's built-in methods to close and pass data back to the parent. 4. Debugging Suggestion: To further debug this issue, you could try adding a console.log immediately after the emit: 
emit('random');
console.log('Emit called');
emit('random');
console.log('Emit called');
If you see 'Emit called' in the console but the parent component doesn't receive the event, it suggests that the issue is with how the modal is handling or propagating events. 5. Alternative Approach: If the emits continue to not work as expected, you might consider using a shared state management solution like Pinia, or passing a callback function to the modal component that can be called directly instead of relying on emits. Unfortunately, the provided knowledge sources don't contain specific information about emit behavior in Nuxt modals. If these suggestions don't resolve the issue, you might need to create a minimal reproduction of the problem and seek further assistance from the Nuxt community or documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@166602211780984832> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?