Skip to content

v-on listeners array #9718

Open
Open
@KaelWD

Description

@KaelWD

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.

<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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions