Skip to content

fix(vue): pass router-link value to href to properly render clickable elements #29745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandyscarney merged 6 commits into from
Aug 5, 2024
Merged

fix(vue): pass router-link value to href to properly render clickable elements #29745

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
366f468
fix(vue): pass router-link value to href to properly render clickable…
brandyscarney Aug 1, 2024
21c5b4a
chore(deps): update vue output target
brandyscarney Aug 1, 2024
8e67945
test(vue): remove button property from router-link items
brandyscarney Aug 1, 2024
f47b01b
test(vue): add test for making item activatable with router-link
brandyscarney Aug 2, 2024
bd957bf
fix(vue): prevent page reload when navigating with router-link
brandyscarney Aug 2, 2024
ac136c4
chore(vue): bump @stencil/vue-output-target
brandyscarney Aug 2, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore(deps): update vue output target
  • Loading branch information
@brandyscarney
brandyscarney committed Aug 1, 2024
commit 21c5b4a056ef0588189b69b3881d434e68e1d16f
18 changes: 9 additions & 9 deletions core/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"@stencil/angular-output-target": "^0.8.4",
"@stencil/react-output-target": "^0.5.3",
"@stencil/sass": "^3.0.9",
"@stencil/vue-output-target": "^0.8.7",
"@stencil/vue-output-target": "^0.0.1-dev.11722540458.1506f4d7",
"@types/jest": "^29.5.6",
"@types/node": "^14.6.0",
"@typescript-eslint/eslint-plugin": "^6.7.2",
Expand Down
13 changes: 11 additions & 2 deletions packages/vue/src/vue-component-lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,17 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
eventsNames.forEach((eventName: string) => {
el.addEventListener(eventName.toLowerCase(), (e: Event) => {
modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue);
/**
* Only update the v-model binding if the event's target is the element we are
* listening on. For example, Component A could emit ionChange, but it could also
* have a descendant Component B that also emits ionChange. We only want to update
* the v-model for Component A when ionChange originates from that element and not
* when ionChange bubbles up from Component B.
*/
if (e.target.tagName === el.tagName) {
modelPropValue = (e?.target as any)[modelProp];
emit(UPDATE_VALUE_EVENT, modelPropValue);
}
});
});
},
Expand Down