vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.81k stars 33.67k forks source link

v-on listeners array #9718

Open KaelWD opened 5 years ago

KaelWD commented 5 years ago

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

posva commented 5 years ago

at the moment, using a helper to merge looks like the way to go