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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

14
core/package-lock.json generated
View File

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

2
core/package.json
View File

@ -38,7 +38,7 @@
"@rollup/plugin-virtual": "^2.0.3", "@rollup/plugin-virtual": "^2.0.3",
"@stencil/core": "2.1.2", "@stencil/core": "2.1.2",
"@stencil/sass": "1.3.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/jest": "^26.0.10",
"@types/node": "^14.6.0", "@types/node": "^14.6.0",
"@types/puppeteer": "3.0.1", "@types/puppeteer": "3.0.1",

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

@ -57,6 +57,17 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => { vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
modelPropValue = (e?.target as any)[modelProp]; modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue); 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]; Container.props = [...componentProps, ROUTER_LINK_VALUE];
if (modelProp) { if (modelProp) {
Container.props.push(MODEL_VALUE); Container.props.push(MODEL_VALUE);
Container.emits = [UPDATE_VALUE_EVENT]; Container.emits = [UPDATE_VALUE_EVENT, modelUpdateEvent];
} }
return Container; return Container;