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

resolves #22076
ionic-team · Sep 15, 2020 · 67fbb3b · 67fbb3b
1 parent 3ea92f5
commit 67fbb3b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 40 deletions.
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/core/package.json
@@ -38,7 +38,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/core": "1.17.3",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "0.1.1",
+    "@stencil/vue-output-target": "0.1.2",
     "@types/jest": "^26.0.10",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "3.0.1",

diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
@@ -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;