fix(vue): improve v-model integration for Vue 3.1.0+ (ionic-team#23420)

sakibguy · Jun 4, 2021 · f008628 · f008628
1 parent 82cfa55
commit f008628
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/core/package.json
@@ -41,7 +41,7 @@
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/sass": "1.3.2",
-    "@stencil/vue-output-target": "^0.4.2",
+    "@stencil/vue-output-target": "^0.4.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "5.4.3",

diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
@@ -121,9 +121,17 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
       };
 
       if (modelProp) {
+        /**
+         * Starting in Vue 3.1.0, all properties are
+         * added as keys to the props object, even if
+         * they are not being used. In order to correctly
+         * account for both value props and v-model props,
+         * we need to check if the key exists for Vue <3.1.0
+         * and then check if it is not undefined for Vue >= 3.1.0.
+         */
         propsToAdd = {
           ...propsToAdd,
-          [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : modelPropValue
+          [modelProp]: props.hasOwnProperty(MODEL_VALUE) && props[MODEL_VALUE] !== undefined ? props.modelValue : modelPropValue
         }
       }