fix(vue): ensure v-model value is properly synced before ionChange event (#22749)

resolves #22610
This commit is contained in:
Liam DeBeasi
2021-01-13 11:22:27 -05:00
committed by GitHub
parent 348c50b7ea
commit e1d6627bf0
3 changed files with 20 additions and 9 deletions

14
core/package-lock.json generated
View File

@ -17,7 +17,7 @@
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/core": "2.1.2",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "^0.2.4",
"@stencil/vue-output-target": "0.2.5",
"@types/jest": "^26.0.10",
"@types/node": "^14.6.0",
"@types/puppeteer": "3.0.1",
@ -1657,9 +1657,9 @@
"dev": true
},
"node_modules/@stencil/vue-output-target": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.4.tgz",
"integrity": "sha512-wtDIYXrOI3bVLfsTFg0uigcwlu+XI20gHy4lpA9C54jP7JOw9LDtczR+LaCAKNSTWczBBEgehRYREpDFvpS1qw==",
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.5.tgz",
"integrity": "sha512-EnCZbJDD7y2nTnaFXo4PJrEgP9CNvJARZQrnvz93rMDKCzm+19C9goU4D6A1ysblLVvZSTm3wELKSM1auRUm0Q==",
"dev": true,
"peerDependencies": {
"@stencil/core": ">=1.8.0"
@ -16390,9 +16390,9 @@
"dev": true
},
"@stencil/vue-output-target": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.4.tgz",
"integrity": "sha512-wtDIYXrOI3bVLfsTFg0uigcwlu+XI20gHy4lpA9C54jP7JOw9LDtczR+LaCAKNSTWczBBEgehRYREpDFvpS1qw==",
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.5.tgz",
"integrity": "sha512-EnCZbJDD7y2nTnaFXo4PJrEgP9CNvJARZQrnvz93rMDKCzm+19C9goU4D6A1ysblLVvZSTm3wELKSM1auRUm0Q==",
"dev": true
},
"@stylelint/postcss-css-in-js": {

View File

@ -38,7 +38,7 @@
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/core": "2.1.2",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "^0.2.4",
"@stencil/vue-output-target": "0.2.5",
"@types/jest": "^26.0.10",
"@types/node": "^14.6.0",
"@types/puppeteer": "3.0.1",

View File

@ -57,6 +57,17 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue);
/**
* We need to emit the change event here
* rather than on the web component to ensure
* that any v-model bindings have been updated.
* Otherwise, the developer will listen on the
* native web component, but the v-model will
* not have been updated yet.
*/
emit(modelUpdateEvent, e);
e.stopImmediatePropagation();
});
}
};
@ -119,7 +130,7 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
Container.props = [...componentProps, ROUTER_LINK_VALUE];
if (modelProp) {
Container.props.push(MODEL_VALUE);
Container.emits = [UPDATE_VALUE_EVENT];
Container.emits = [UPDATE_VALUE_EVENT, modelUpdateEvent];
}
return Container;