withModifiers() Wrap Event Modifiers
Last updated: 2026-10-22
withModifiers() Wrap Event Modifiers
withModifiers() applies modifier behaviour such as stop, prevent and once to handlers inside render functions.
| Group | Render Functions & SSR |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
h("button", { onClick: withModifiers(fn, ["prevent", "stop"]) }, "Submit")⚙️ Arguments
| handler, modifiers | A handler plus an array of modifier names |
|---|
Returns：A wrapped handler
▶ Example
Edit the code below and see the live result:
Output：
Inner clicks stop at the inner handler; outer clicks log the outer one.💡 Key Points
ℹ️ Note Template modifiers compile to it.
💡 Tip Use it in manual render code.
⚠️ Warning Pass short names such as stop, prevent, self, once.
🏷️ Related Render Functions & SSR
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Needed in templates?
A No — templates have modifier sugar.
Q Can modifiers stack?
A Yes — they apply in order.
Q Versus manual stopPropagation?
A Same effect, less code.
