Skip to content
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

v-on modifier .once triggers handler at most once... per what? #3033

Open
nekomachi-touge opened this issue Sep 20, 2024 · 5 comments
Open

Comments

@nekomachi-touge
Copy link

- `.once` - trigger handler at most once.

I found the statement above unclear, because this could imply the listener would be called once per:

  • an event,
  • a mount,
  • an update or
  • a span in lifecycle (possibly specified somewhere).

This could lead readers to assume the semantics or simply avoid using this modifier not to cause confusion.

@mahmudunnabikajal
Copy link
Contributor

mahmudunnabikajal commented Sep 28, 2024

@nekomachi-touge The confusion about "mount," "update," or "lifecycle" phases doesn't apply directly here. The .once modifier is strictly tied to the event listener itself, not the component lifecycle. So, if the listener is attached to an event like @click/@change/@input etc., it will trigger once when the event occurs and then be removed.

<template>
  <button @click.once="handleClick">Click Me</button>
</template>

<script setup>
function handleClick() {
  console.log('Button clicked');
}
</script>

In this case, the handleClick function will only run once, regardless of how many times the button is clicked, because the event listener is removed after the first trigger.

Note: check line docs/src/api/built-in-directives.md#178 for the Argument.

@nekomachi-touge
Copy link
Author

@mahmudunnabikajal
Umm, I found your argument doesn't clarify when a listener is (re)set, even though it happens independent of the lifecycle.
I don't expect a listener will run really once, like persisting with user agent's navigation (e.g. future revisits will not invoke the listener, by saving its state in Cookie, IndexedDB or something).

@mahmudunnabikajal
Copy link
Contributor

mahmudunnabikajal commented Oct 9, 2024

@mahmudunnabikajal Umm, I found your argument doesn't clarify when a listener is (re)set, even though it happens independent of the lifecycle. I don't expect a listener will run really once, like persisting with user agent's navigation (e.g. future revisits will not invoke the listener, by saving its state in Cookie, IndexedDB or something).

@nekomachi-touge
The use case varies for each individual. I suggest creating a custom directive tailored to your specific requirements

@nekomachi-touge
Copy link
Author

@mahmudunnabikajal Maybe there is a misunderstanding.
What I want to achieve here is to clearly state (or make it obvious) when a listener with the modifier is set/invokable.

@mahmudunnabikajal
Copy link
Contributor

Maybe there is a misunderstanding.
What I want to achieve here is to clearly state (or make it obvious) when a listener with the modifier is set/invokable.

I understand your issue. It will review by a admin. Thanks ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants