Cannot execute scoped slot and function in the same event Vue-CodePudding

I have the following code which uses this VueTailwind package:

<t-dropdown>
<div
    slot="trigger"
    slot-scope="{mousedownHandler, focusHandler, blurHandler, keydownHandler}"
>
    <button
        id="reseller-menu"
        aria-label="User menu"
        aria-haspopup="true"
        @mousedown="mousedownHandler"
        @focus="focusHandler"
        @blur="blurHandler"
        @keydown="keydownHandler"
    >
        {{ $page.props.auth.user.reseller.name }}
        <icon icon="chevron-down" class-name="ml-2" />
    </button>
</div>

<div slot-scope="{ blurHandler }">
    <span v-for="user in users" :key="reseller.id" role="menuitem" 
         @click="changeUser(user.id); blurHandler">{{ user.name }}</span>
</div>
</t-dropdown>

However, the blurHandler is not executed whenever the changeUser(user.id) method (a method in the parent component which seems to execute fine) is added to the @click event. The only way I was able to solve this issue was to use two different events such as the following:

<span v-for="user in users" :key="reseller.id" role="menuitem" 
         @click="changeUser(user.id)" @mouseup="blurHandler">{{ user.name }}</span>

How can I use both in the same event since this doesn't seem to work in this case?

CodePudding user response：

When the v-on value is a function reference, the template compiler transforms it into a function call, passing the event argument:

<button @click="functionRef">

<!-- ...is transformed into: -->

<button @click="functionRef($event)">

But when the v-on value is an expression, the template compiler wraps it in a function:

<button @click="onClick(); functionRef">

<!-- ...is transformed into: -->

<button @click="() => { onClick(); functionRef; }">

Notice functionRef; is not a function call, and effectively does nothing. To actually invoke the function in that expression, add the parentheses to make it a call:

<button @click="onClick(); functionRef()">

So your markup should be:

<div slot-scope="{ blurHandler }">
    <span v-for="user in users" ⋯