Skip to content

Commit

Permalink
fix(vue): Fix custom listeners being passed to pages and tabs
Browse files Browse the repository at this point in the history
This also removes unrecognizedListeners from the root navigator and
tabbar element of the templates. This behaviour is the default already
in Vue 3 so we don't need unrecognizedListeners here.
  • Loading branch information
emccorson committed Mar 22, 2021
1 parent 2a0d3bd commit 4852e8a
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 6 deletions.
3 changes: 1 addition & 2 deletions bindings/vue/vue-onsenui/src/components/VOnsNavigator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
v-for="page in pageStack"
:is="page"
:key="page.key || page.name"
v-on="unrecognizedListeners"
v-bind="page.onsNavigatorProps"
v-bind="{ ...unrecognizedListeners, ...page.onsNavigatorProps }"
></component>
</slot>
</ons-navigator>
Expand Down
3 changes: 1 addition & 2 deletions bindings/vue/vue-onsenui/src/components/VOnsTabbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@
:on-swipe.prop="onSwipe"
:activeIndex="index"
:modifier="normalizedModifier"
v-on="unrecognizedListeners"
@prechange.self="$nextTick(() => !$event.detail.canceled && $emit('update:index', $event.index))"
>
<div class="tabbar__content">
<div>
<slot name="pages">
<component v-for="tab in tabs" v-bind="tab.props" :is="tab.page" :key="(tab.page.key || tab.page.name || _tabKey(tab))" v-on="unrecognizedListeners"></component>
<component v-for="tab in tabs" v-bind="{ ...unrecognizedListeners, ...tab.props }" :is="tab.page" :key="(tab.page.key || tab.page.name || _tabKey(tab))" />
</slot>
</div>
<div></div>
Expand Down
6 changes: 4 additions & 2 deletions bindings/vue/vue-onsenui/src/mixins/derive.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,12 @@ const deriveEvents = elementName => ({
computed: {
unrecognizedListeners() {
const name = camelize('-' + this.$options.name.slice(6));
return Object.keys(this.$listeners || {})
const listeners = Object.fromEntries(Object.entries(this.$attrs)
.filter(([attribute, handler]) => /^on[^a-z]/.test(attribute)));
return Object.keys(listeners || {})
.filter(k => (this.$ons.elements[name].events || []).indexOf(k) === -1)
.reduce((r, k) => {
r[k] = this.$listeners[k];
r[k] = listeners[k];
return r;
}, {});
}
Expand Down

0 comments on commit 4852e8a

Please sign in to comment.