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

fix(vue): using refs with v-model now works properly (#22092)

Browse Source 
resolves #22076
This commit is contained in:
Liam DeBeasi
2020-09-15 15:49:51 -04:00
committed by GitHub
parent 3ea92f5527
commit 67fbb3b963
5 changed files with 37 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/vue/src/vue-component-lib/utils.ts
View File

@ -48,33 +48,16 @@ export const defineContainer = <Props extends object>(name: string, componentPro
const { modelValue, ...restOfProps } = props;
const containerRef = ref<HTMLElement>();
const classes: string[] = (attrs.class as string)?.split(' ') || [];
let finalProps: any = (modelProp) ? (
{
...restOfProps,
[modelProp]: props.hasOwnProperty(MODEL_VALUE) ? modelValue : (props as any)[modelProp],
const onVnodeBeforeMount = (vnode: VNode) => {
// Add a listener to tell Vue to update the v-model
if (vnode.el) {
vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
emit(UPDATE_VALUE_EVENT, (e?.target as any)[modelProp]);
});
}
) : restOfProps;
};
if (modelUpdateEvent) {
const onVnodeBeforeMount = (vnode: VNode) => {
// Add a listener to tell Vue to update the v-model
if (vnode.el) {
vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
emit(UPDATE_VALUE_EVENT, (e?.target as any)[modelProp]);
});
}
};
finalProps = {
...finalProps,
...attrs,
onVnodeBeforeMount,
ref: containerRef
}
}
let finalProps: any = { ...restOfProps };
if (routerLinkComponent) {
const navManager: NavManager = inject(NAV_MANAGER);
@ -102,15 +85,29 @@ export const defineContainer = <Props extends object>(name: string, componentPro
}
}
return () =>
h(
name,
{
...finalProps,
class: getElementClasses(containerRef, classes),
},
slots.default && slots.default()
);
return () => {
let propsToAdd = {
...finalProps,
ref: containerRef,
class: getElementClasses(containerRef, classes)
};
if (modelUpdateEvent) {
propsToAdd = {
...propsToAdd,
onVnodeBeforeMount
}
}
if (modelProp) {
propsToAdd = {
...propsToAdd,
[modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : (props as any)[modelProp]
}
}
return h(name, propsToAdd, slots.default && slots.default());
}
});
Container.displayName = name;