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

fix(vue): improve v-model binding sync between vue wrappers and web components (#22745)

Browse Source 
resolves #22731
This commit is contained in:
Liam DeBeasi
2021-01-08 12:06:45 -05:00
committed by GitHub
parent 3d6ac1382e
commit 64719f49f9
3 changed files with 12 additions and 10 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.3", "@stencil/vue-output-target": "^0.2.4",
"@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.3", "version": "0.2.4",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz", "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.4.tgz",
"integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==", "integrity": "sha512-wtDIYXrOI3bVLfsTFg0uigcwlu+XI20gHy4lpA9C54jP7JOw9LDtczR+LaCAKNSTWczBBEgehRYREpDFvpS1qw==",
"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.3", "version": "0.2.4",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.3.tgz", "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.2.4.tgz",
"integrity": "sha512-jxFElPUVp56DHxLvYTvlnHMFnVQ0ITAUCLYfHvV8TY49PUbV5Gw1nYhhJQfpi5gJU2PPoWtIJjUGMsof8lmh6Q==", "integrity": "sha512-wtDIYXrOI3bVLfsTFg0uigcwlu+XI20gHy4lpA9C54jP7JOw9LDtczR+LaCAKNSTWczBBEgehRYREpDFvpS1qw==",
"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.3", "@stencil/vue-output-target": "^0.2.4",
"@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",

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

@ -48,13 +48,15 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
* They refer to whatever properties are set on an instance of a component. * They refer to whatever properties are set on an instance of a component.
*/ */
const Container = defineComponent<Props & InputProps>((props, { attrs, slots, emit }) => { const Container = defineComponent<Props & InputProps>((props, { attrs, slots, emit }) => {
let modelPropValue = (props as any)[modelProp];
const containerRef = ref<HTMLElement>(); const containerRef = ref<HTMLElement>();
const classes = new Set(getComponentClasses(attrs.class)); const classes = new Set(getComponentClasses(attrs.class));
const onVnodeBeforeMount = (vnode: VNode) => { const onVnodeBeforeMount = (vnode: VNode) => {
// Add a listener to tell Vue to update the v-model // Add a listener to tell Vue to update the v-model
if (vnode.el) { if (vnode.el) {
vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => { vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
emit(UPDATE_VALUE_EVENT, (e?.target as any)[modelProp]); modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue);
}); });
} }
}; };
@ -105,7 +107,7 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
if (modelProp) { if (modelProp) {
propsToAdd = { propsToAdd = {
...propsToAdd, ...propsToAdd,
[modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : (props as any)[modelProp] [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : modelPropValue
} }
} }