javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): ionChange events now propagate correctly (#22872)

Browse Source 
resolves #22870
This commit is contained in:
Liam DeBeasi
2021-02-04 11:00:46 -05:00
committed by GitHub
parent 487349f02a
commit ff0f1da9f1
6 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/vue/src/ionic-vue.ts
View File

@ -2,8 +2,17 @@ import { App, Plugin } from 'vue';
import { IonicConfig, setupConfig } from '@ionic/core';
import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
const ael = (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(eventName.toLowerCase(), cb, opts);
const rel = (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(eventName.toLowerCase(), cb, opts);
/**
* We need to make sure that the web component fires an event
* that will not conflict with the user's @ionChange binding,
* otherwise the binding's callback will fire before any
* v-model values have been updated.
*/
const transformEventName = (eventName: string) => {
return eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase();
}
const ael = (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(transformEventName(eventName), cb, opts);
const rel = (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(transformEventName(eventName), cb, opts);
export const IonicVue: Plugin = {
@ -17,7 +26,7 @@ export const IonicVue: Plugin = {
await applyPolyfills();
await defineCustomElements(window, {
exclude: ['ion-tabs'],
ce: (eventName: string, opts: any) => new CustomEvent(eventName.toLowerCase(), opts),
ce: (eventName: string, opts: any) => new CustomEvent(transformEventName(eventName), opts),
ael,
rel
} as any);