Clarify edge cases for directives attribute expression

[CyberAP]

You can as well express event listener bindings as the following:

<input v-on:input="foo(), bar($event)">

Live example: https://vue-next-template-explorer.netlify.app/#%7B%22src%22%3A%22%3Cinput%20v-on%3Ainput%3D%5C%22foo()%2C%20bar(%24event)%5C%22%2F%3E%22%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22optimizeImports%22%3Afalse%2C%22hoistStatic%22%3Afalse%2C%22cacheHandlers%22%3Afalse%2C%22scopeId%22%3Anull%2C%22ssrCssVars%22%3A%22%7B%20color%20%7D%22%2C%22optimizeBindings%22%3Afalse%7D%7D

To be clear, it is technically a single expression that contains comma separated list of expressions which is perfectly valid. But this kind of expression does not work consistently across various directives and mustache syntax, so I think it should be included in edge cases.

Note

Thanks for your interest in submitting a PR! At this time, because the docs are in beta, the team is currently in the midst of changes and we are not ready for additional contributions yet.

To bring your issue to the team's attention though, we would recommend creating an issue and we'll get to it when we can.

Thanks for your understanding!

[NataliaTepluhina]

@CyberAP it's a good point! However, it does require adding a point about multiple expressions to v-on directive description. Would you prefer to add it to this PR? (non-mandatory, I can create a follow-up for this)

[CyberAP]

Sure, I'll add this to the PR.

[NataliaTepluhina]

@CyberAP thank you! Looks great to me 👍🏻

[husayt]

@CyberAP @NataliaTepluhina there is also another way to run multiple actions on the event handler. Many people, including myself, are still confused between the differences of the above and the below ways. It wil be great to clarify that in the same section.

<input v-on:input="(e) => { foo(); bar(e) }">

or

<input v-on:input="(e) => { 
    foo()
    bar(e) 
}">

vs

<input v-on:input="foo(), bar($event)">

Thanks

[husayt]

@NataliaTepluhina @CyberAP looking at the test spec, I notice that form with comma is not covered. So seems like what is currently recommended in documentation is not officially supported. only below forms are covered by tests:

<input v-on:input="(e) => { foo(); bar(e) }">

and

<input v-on:input="(e) => { 
    foo()
    bar(e) 
}">