Two components with scoped slots that provide events to a child component. If they are used together some listeners may be overwritten if not normalised first.
<v-menu>
<template #activator="{ on: menu }">
<v-tooltip bottom>
<template #activator="{ on: tooltip }">
<v-btn v-on="{ ...tooltip, ...menu }"> <!-- If both have a click event, only the menu will work -->
Dropdown w/ Tooltip
</v-btn>
</template>
<span>Im A ToolTip</span>
</v-tooltip>
</template>
<v-list>[...]</v-list>
</v-menu>
What does the proposed API look like?
<component v-on="[{ click: foo }, { click: bar }]">
Equivalent to:
<component v-on="{ click: [foo, bar] }">
In the first example:
<v-menu>
<template #activator="{ on: menu }">
<v-tooltip bottom>
<template #activator="{ on: tooltip }">
<v-btn v-on="[tooltip, menu]">
Dropdown w/ Tooltip
</v-btn>
</template>
<span>Im A ToolTip</span>
</v-tooltip>
</template>
<v-list>[...]</v-list>
</v-menu>
Currently this throws [Vue warn]: v-on without argument expects an Object value
What problem does this feature solve?
Two components with scoped slots that provide events to a child component. If they are used together some listeners may be overwritten if not normalised first.
What does the proposed API look like?
Equivalent to:
In the first example:
Currently this throws
[Vue warn]: v-on without argument expects an Object value