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
Question about "visualize event argument" #2445
Comments
It was added for new users to understand these two points.
However, depending on user experience this may also be a nuisance, so just disable it in user space settings as needed. |
Thanks, John; your explanation is much appreciated. |
You're welcome, I'm Johnson btw. :) |
For those who need more context: Volar now proposes to add You can disable this feature in Volar’s settings or with Johnson mentions two reasons for the addition:
Both styles below are correct, but the first one might surprise a new user because <button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<button @click="$event => warn('Form cannot be submitted yet.', $event)">
Submit
</button> Note that Vue compiles both styles to the same result, so you’re not losing any performance by adding the _createElementVNode("button", {
onClick: _cache[0] || (_cache[0] = $event => (_ctx.warn('Form cannot be submitted yet.', $event)))
}, " Submit "),
_createElementVNode("button", {
onClick: _cache[1] || (_cache[1] = $event => _ctx.warn('Form cannot be submitted yet.', $event))
}, " Submit ") Check for yourself in this playground (click on the JS tab to see how the template is compiled): https://sfc.vuejs.org/#eNqtkD0OwjAMha9iWUiABMleFQQLF2DN0hYDBeJEiUuFqt6dpkVMjGz+ef6s9[…]SeoNXER8zreO5SjndonLhoodKhYaltqQo2nUZXBspDGCDCdEb7rF/A3K8dfo=
In other words, assume that <div v-if="foo">
<!-- 'foo' is narrowed correctly to an object inside of the curly braces -->
Test 1: {{ foo.bar }}
<!-- 'foo' is narrowed correctly to an object inside of the assignment to the property ':title' -->
<span :title="foo.bar">Test 2 nested</span>
<!-- 'foo' still possibly undefined inside of `@click` and you get a TS error "foo is possibly undefined" -->
<button @click="alert(foo.bar)">
Submit
</button>
<!-- same error, and this wrapper makes it more obvious -->
<button @click="$event => alert(foo.bar)">
Submit
</button>
</div> Why is this happening, and why the wrapper makes it more obvious? The Many people stumble on this one, which has nothing to do with Volar or Vue. This can be reproduced in pure TypeScript: let foo: string | undefined;
if (foo) {
($event: any) => onSelect(foo) // Argument of type 'string | undefined' is not assignable to parameter of type 'string'.ts(2345)
}
function onSelect(foo: string) { } Check for yourself in this playground: |
Thanks! Just link your explanation to the hint. |
Volar 1.1.4 added a new setting,
volar.inlayHints.eventArgumentInInlineHandlers
, enabled by default. Here's the commit:274b027
The commit doesn't reference an issue; we're very interested to know more about the intent and how to leverage it best!
The text was updated successfully, but these errors were encountered: