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

This commit is contained in:
Liam DeBeasi
2021-06-04 19:25:02 -04:00
committed by GitHub
parent 82cfa55653
commit f008628851
3 changed files with 17 additions and 9 deletions

14
core/package-lock.json generated
View File

@ -19,7 +19,7 @@
"@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3", "@rollup/plugin-virtual": "^2.0.3",
"@stencil/sass": "1.3.2", "@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/jest": "^26.0.20",
"@types/node": "^14.6.0", "@types/node": "^14.6.0",
"@types/puppeteer": "5.4.3", "@types/puppeteer": "5.4.3",
@ -1374,9 +1374,9 @@
"dev": true "dev": true
}, },
"node_modules/@stencil/vue-output-target": { "node_modules/@stencil/vue-output-target": {
"version": "0.4.2", "version": "0.4.3",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.2.tgz", "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.3.tgz",
"integrity": "sha512-C+HYpVXpYUpD0x8eFC0Ahe45D3ZOUpMAh/RDCXsgooi1auWTaOFvA7YkXHpc6suBkh44HnPhYEA1VIslpU4QEA==", "integrity": "sha512-+oTTSjzISERzrBDrtu3Iyhv69SSwzauQGnAej7GAWbLhzp/rCMyMHOTnZe5V+niJH9SHh1VahaVc3NQsA251qw==",
"dev": true, "dev": true,
"peerDependencies": { "peerDependencies": {
"@stencil/core": ">=1.8.0" "@stencil/core": ">=1.8.0"
@ -15022,9 +15022,9 @@
"dev": true "dev": true
}, },
"@stencil/vue-output-target": { "@stencil/vue-output-target": {
"version": "0.4.2", "version": "0.4.3",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.2.tgz", "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.3.tgz",
"integrity": "sha512-C+HYpVXpYUpD0x8eFC0Ahe45D3ZOUpMAh/RDCXsgooi1auWTaOFvA7YkXHpc6suBkh44HnPhYEA1VIslpU4QEA==", "integrity": "sha512-+oTTSjzISERzrBDrtu3Iyhv69SSwzauQGnAej7GAWbLhzp/rCMyMHOTnZe5V+niJH9SHh1VahaVc3NQsA251qw==",
"dev": true "dev": true
}, },
"@stylelint/postcss-css-in-js": { "@stylelint/postcss-css-in-js": {

View File

@ -41,7 +41,7 @@
"@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3", "@rollup/plugin-virtual": "^2.0.3",
"@stencil/sass": "1.3.2", "@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/jest": "^26.0.20",
"@types/node": "^14.6.0", "@types/node": "^14.6.0",
"@types/puppeteer": "5.4.3", "@types/puppeteer": "5.4.3",

View File

@ -121,9 +121,17 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
}; };
if (modelProp) { 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 = {
...propsToAdd, ...propsToAdd,
[modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : modelPropValue [modelProp]: props.hasOwnProperty(MODEL_VALUE) && props[MODEL_VALUE] !== undefined ? props.modelValue : modelPropValue
} }
} }