Skip to content

Events are not found in useAttrs #7630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mrhammadasif opened this issue Feb 2, 2023 · 3 comments
Closed

Events are not found in useAttrs #7630

mrhammadasif opened this issue Feb 2, 2023 · 3 comments

Comments

@mrhammadasif
Copy link

Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/vue-3-events-notinattrs?file=src%2FTest.vue

Steps to reproduce

According to the Vue 3 Migration Documentation https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html#overview the $listeners is removed and we have to use useAttrs but useAttrs doesn't provide the events specified for the Component

<Test @dismiss="handler" />
const attrs = useAttrs()
attrs.onDismiss // ERROR: this is not found

What is expected?

To get events list as defined in https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html#_3-x-syntax

What is actually happening?

Events are missing, only attributes are part of useAttrs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vue: ^3.2.25 => 3.2.31

Any additional comments?

No response

@sqal
Copy link
Contributor

sqal commented Feb 2, 2023

When you declare an event in defineEmits, it will be removed from the $attrs because it is stored internally elsewhere.

Duplicate #5319

There is no official API for getting declared events passed from the parent component, I don't know if this is something that is planned to be added, but here #5220 (comment) I've shown some workaround for this (use at your own risk, may break down at any time)

@LinusBorg
Copy link
Member

Events that are not declared are part of attrs. Declared component events are not, because by default, all attrs are passed on to a component's root element, and you likely don't want your declared events to be added as a listener on some div.

the simplest way to deal with that is to just wrap the emit function for the event(s).

const onClose = (...args) => emit('close', ...args)

and combine that with the attrs where needed.

If you think this should be added to the docs, feel free to start a discussion on the docs repo.

@mrhammadasif
Copy link
Author

Yes, definitely the docs need to be updated then. All confusion was because of the docs

If you think this should be added to the docs, feel free to start a discussion on the docs repo.

Yes, will do that

@github-actions github-actions bot locked and limited conversation to collaborators Sep 14, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants