fix(compiler-core): Refs inside v-for are not applied through v-bind (fix #10696) by quiteeasy · Pull Request #10706 · vuejs/core

quiteeasy · 2024-04-15T17:01:49Z

The ref is resolved at runtime from the object. However, the identifier that the ref is inside a v-for is set at compile time. Due to this, the ref is often set to a random element in the list, typically the last one.

We could set the identifier that a ref is inside a v-for without having the ref props explicitly set, but that would require adding an extra prop to every element inside the v-for that has v-bind="object" set. I'm not sure if this approach is worth the added complexity, especially since the extra prop would not be used most of the time.

I'm opening a PR for the team to consider this potential solution. Let me know if you have any other thoughts or suggestions.

fix #10696

Screen.Recording.2024-04-16.at.12.00.27.AM.mov

marcosdissotti

💡Obs. At condition, context.scopes.vFor > 0 maybe interesting to add in a auxiliary variable, for exemple, const hasVFor = context.scopes.vFor > 0; or hasVForDirective.

I liked your suggestion ✌️

quiteeasy · 2024-04-18T07:19:33Z

@marcosdissotti

💡Obs. At condition, context.scopes.vFor > 0 maybe interesting to add in a auxiliary variable, for exemple, const hasVFor = context.scopes.vFor > 0; or hasVForDirective.

I liked your suggestion ✌️

Thank you for the review and the suggestion! I have added the hasVFor variable. I'm looking forward to your feedback.

github-actions · 2024-04-22T07:54:15Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.7 kB	34.5 kB	31.1 kB
vue.global.prod.js	148 kB (-37 B)	53.8 kB (+3 B)	48 kB (-13 B)

Usages

Name	Size	Gzip	Brotli
createApp	50.8 kB	19.8 kB	18.1 kB
createSSRApp	54.1 kB	21.2 kB	19.3 kB
defineCustomElement	53.1 kB	20.6 kB	18.8 kB
overall	64.5 kB	24.9 kB	22.6 kB

## [3.4.27](vuejs/core@v3.4.26...v3.4.27) (2024-05-06) ### Bug Fixes * **compat:** include legacy scoped slots ([#10868](vuejs/core#10868)) ([8366126](vuejs/core@8366126)), closes [#8869](vuejs/core#8869) * **compiler-core:** add support for arrow aysnc function with unbracketed ([#5789](vuejs/core#5789)) ([ca7d421](vuejs/core@ca7d421)), closes [#5788](vuejs/core#5788) * **compiler-dom:** restrict createStaticVNode usage with option elements ([#10846](vuejs/core#10846)) ([0e3d617](vuejs/core@0e3d617)), closes [#6568](vuejs/core#6568) [#7434](vuejs/core#7434) * **compiler-sfc:** handle keyof operator ([#10874](vuejs/core#10874)) ([10d34a5](vuejs/core@10d34a5)), closes [#10871](vuejs/core#10871) * **hydration:** handle edge case of style mismatch without style attribute ([f2c1412](vuejs/core@f2c1412)), closes [#10786](vuejs/core#10786) ## [3.4.26](vuejs/core@v3.4.25...v3.4.26) (2024-04-29) ### Bug Fixes * **compiler-core:** fix bail constant for globals ([fefce06](vuejs/core@fefce06)) * **compiler-core:** remove unnecessary constant bail check ([09b4df8](vuejs/core@09b4df8)), closes [#10807](vuejs/core#10807) * **runtime-core:** attrs should be readonly in functional components ([#10767](vuejs/core#10767)) ([e8fd644](vuejs/core@e8fd644)) * **runtime-core:** ensure slot compiler marker writable ([#10825](vuejs/core#10825)) ([9c2de62](vuejs/core@9c2de62)), closes [#10818](vuejs/core#10818) * **runtime-core:** properly handle inherit transition during clone VNode ([#10809](vuejs/core#10809)) ([638a79f](vuejs/core@638a79f)), closes [#3716](vuejs/core#3716) [#10497](vuejs/core#10497) [#4091](vuejs/core#4091) * **Transition:** re-fix [#10620](vuejs/core#10620) ([#10832](vuejs/core#10832)) ([accf839](vuejs/core@accf839)), closes [#10632](vuejs/core#10632) [#10827](vuejs/core#10827) ## [3.4.25](vuejs/core@v3.4.24...v3.4.25) (2024-04-24) ### Bug Fixes * **defineModel:** align prod mode runtime type generation with defineProps ([4253a57](vuejs/core@4253a57)), closes [#10769](vuejs/core#10769) * **runtime-core:** properly get keepAlive child ([#10772](vuejs/core#10772)) ([3724693](vuejs/core@3724693)), closes [#10771](vuejs/core#10771) * **runtime-core:** use normal object as internal prototype for attrs and slots ([064e82f](vuejs/core@064e82f)), closes [/github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add#r141304923](https://github.com//github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add/issues/r141304923) ## [3.4.24](vuejs/core@v3.4.23...v3.4.24) (2024-04-22) ### Bug Fixes * **compiler-core:** handle template ref bound via v-bind object on v-for ([#10706](vuejs/core#10706)) ([da7adef](vuejs/core@da7adef)), closes [#10696](vuejs/core#10696) * **compiler-core:** properly parse await expressions in edge cases ([b92c25f](vuejs/core@b92c25f)), closes [#10754](vuejs/core#10754) * **compiler-sfc:** handle readonly operator and ReadonlyArray/Map/Set types ([5cef52a](vuejs/core@5cef52a)), closes [#10726](vuejs/core#10726) * **compiler-ssr:** fix hydration mismatch for conditional slot in transition ([f12c81e](vuejs/core@f12c81e)), closes [#10743](vuejs/core#10743) * **compiler-ssr:** fix v-html SSR for nullish values ([1ff4076](vuejs/core@1ff4076)), closes [#10725](vuejs/core#10725) * **deps:** update compiler ([#10760](vuejs/core#10760)) ([15df5c1](vuejs/core@15df5c1)) * **runtime-core:** fix edge case of KeepAlive inside Transition with slot children ([#10719](vuejs/core#10719)) ([e51ca61](vuejs/core@e51ca61)), closes [#10708](vuejs/core#10708) * **runtime-core:** further fix slots _ctx check ([cde7f05](vuejs/core@cde7f05)), closes [#10724](vuejs/core#10724) * **runtime-core:** props should be readonly via direct template access ([b93f264](vuejs/core@b93f264)), closes [#8216](vuejs/core#8216) [#10736](vuejs/core#10736) * **transition:** transition is breaking/flickering when enter is canceled ([#10688](vuejs/core#10688)) ([65109a7](vuejs/core@65109a7)) ## [3.4.23](vuejs/core@v3.4.22...v3.4.23) (2024-04-16) ### Bug Fixes * **runtime-core:** fix regression for $attrs tracking in slots ([6930e60](vuejs/core@6930e60)), closes [#10710](vuejs/core#10710) * **runtime-core:** use same internal object mechanism for slots ([6df53d8](vuejs/core@6df53d8)), closes [#10709](vuejs/core#10709) ## [3.4.22](vuejs/core@v3.4.21...v3.4.22) (2024-04-15) ### Bug Fixes * **compat:** fix $options mutation + adjust private API initialization ([d58d133](vuejs/core@d58d133)), closes [#10626](vuejs/core#10626) [#10636](vuejs/core#10636) * **compile-sfc:** analyze v-bind shorthand usage in template ([#10518](vuejs/core#10518)) ([e5919d4](vuejs/core@e5919d4)), closes [#10515](vuejs/core#10515) * **compiler-core:** fix loc.source for end tags with whitespace before > ([16174da](vuejs/core@16174da)), closes [#10694](vuejs/core#10694) [#10695](vuejs/core#10695) * **compiler-core:** fix v-bind shorthand for component :is ([04af950](vuejs/core@04af950)), closes [#10469](vuejs/core#10469) [#10471](vuejs/core#10471) * **compiler-sfc:** :is() and :where() in compound selectors ([#10522](vuejs/core#10522)) ([660cadc](vuejs/core@660cadc)), closes [#10511](vuejs/core#10511) * **compiler-sfc:** also search for `.tsx` when type import's extension is omitted ([#10637](vuejs/core#10637)) ([34106bc](vuejs/core@34106bc)), closes [#10635](vuejs/core#10635) * **compiler-sfc:** fix defineModel coercion for boolean + string union types ([#9603](vuejs/core#9603)) ([0cef65c](vuejs/core@0cef65c)), closes [#9587](vuejs/core#9587) [#10676](vuejs/core#10676) * **compiler-sfc:** fix universal selector scope ([#10551](vuejs/core#10551)) ([54a6afa](vuejs/core@54a6afa)), closes [#10548](vuejs/core#10548) * **compiler-sfc:** use options module name if options provide runtimeModuleName options ([#10457](vuejs/core#10457)) ([e76d743](vuejs/core@e76d743)), closes [#10454](vuejs/core#10454) * **custom-element:** avoid setting attr to null if it is removed ([#9012](vuejs/core#9012)) ([b49306a](vuejs/core@b49306a)), closes [#9006](vuejs/core#9006) [#10324](vuejs/core#10324) * **hydration:** properly handle optimized mode during hydrate node ([#10638](vuejs/core#10638)) ([2ec06fd](vuejs/core@2ec06fd)), closes [#10607](vuejs/core#10607) * **reactivity:** computed should not be detected as true by isProxy ([#10401](vuejs/core#10401)) ([9da34d7](vuejs/core@9da34d7)) * **reactivity:** fix hasOwnProperty key coercion edge cases ([969c5fb](vuejs/core@969c5fb)) * **reactivity:** fix tracking when hasOwnProperty is called with non-string value ([c3c5dc9](vuejs/core@c3c5dc9)), closes [#10455](vuejs/core#10455) [#10464](vuejs/core#10464) * **runtime-core:** fix errorHandler causes an infinite loop during execution ([#9575](vuejs/core#9575)) ([ab59bed](vuejs/core@ab59bed)) * **runtime-core:** handle invalid values in callWithAsyncErrorHandling ([53d15d3](vuejs/core@53d15d3)) * **runtime-core:** show hydration mismatch details for non-rectified mismatches too when __PROD_HYDRATION_MISMATCH_DETAILS__ is set ([#10599](vuejs/core#10599)) ([0dea7f9](vuejs/core@0dea7f9)) * **runtime-dom:** `v-model` string/number coercion for multiselect options ([#10576](vuejs/core#10576)) ([db374e5](vuejs/core@db374e5)) * **runtime-dom:** fix css v-bind for suspensed components ([#8523](vuejs/core#8523)) ([67722ba](vuejs/core@67722ba)), closes [#8520](vuejs/core#8520) * **runtime-dom:** force update v-model number with leading 0 ([#10506](vuejs/core#10506)) ([15ffe8f](vuejs/core@15ffe8f)), closes [#10503](vuejs/core#10503) [#10615](vuejs/core#10615) * **runtime-dom:** sanitize wrongly passed string value as event handler ([#8953](vuejs/core#8953)) ([7ccd453](vuejs/core@7ccd453)), closes [#8818](vuejs/core#8818) * **ssr:** don't render v-if comments in TransitionGroup ([#6732](vuejs/core#6732)) ([5a96267](vuejs/core@5a96267)), closes [#6715](vuejs/core#6715) * **Transition:** ensure the KeepAlive children unmount w/ out-in mode ([#10632](vuejs/core#10632)) ([fc99e4d](vuejs/core@fc99e4d)), closes [#10620](vuejs/core#10620) * **TransitionGroup:** avoid set transition hooks for comment nodes and text nodes ([#9421](vuejs/core#9421)) ([140a768](vuejs/core@140a768)), closes [#4621](vuejs/core#4621) [#4622](vuejs/core#4622) [#5153](vuejs/core#5153) [#5168](vuejs/core#5168) [#7898](vuejs/core#7898) [#9067](vuejs/core#9067) * **types:** avoid merging object union types when using withDefaults ([#10596](vuejs/core#10596)) ([37ba93c](vuejs/core@37ba93c)), closes [#10594](vuejs/core#10594) ### Performance Improvements * add `__NO_SIDE_EFFECTS__` comments ([#9053](vuejs/core#9053)) ([d46df6b](vuejs/core@d46df6b)) * optimize component props/slots internal object checks ([6af733d](vuejs/core@6af733d)) * **ssr:** avoid calling markRaw on component instance proxy ([4bc9f39](vuejs/core@4bc9f39)) * **ssr:** optimize setup context creation for ssr in v8 ([ca84316](vuejs/core@ca84316)) ## [3.4.21](vuejs/core@v3.4.20...v3.4.21) (2024-02-28) ### Bug Fixes * **runtime-dom:** avoid unset option's value ([#10416](vuejs/core#10416)) ([b3f8b5a](vuejs/core@b3f8b5a)), closes [#10412](vuejs/core#10412) [#10396](vuejs/core#10396) * **suspense:** ensure nested suspense patching if in fallback state ([#10417](vuejs/core#10417)) ([7c97778](vuejs/core@7c97778)), closes [#10415](vuejs/core#10415) * **warning:** stringify args in warn handler ([#10414](vuejs/core#10414)) ([bc37258](vuejs/core@bc37258)), closes [#10409](vuejs/core#10409) ## [3.4.20](vuejs/core@v3.4.19...v3.4.20) (2024-02-26) ### Bug Fixes * **parser:** should not treat uppercase components as special tags ([e0e0253](vuejs/core@e0e0253)), closes [#10395](vuejs/core#10395) * **runtime-dom:** avoid always resetting nullish option value ([ff130c4](vuejs/core@ff130c4)), closes [#10396](vuejs/core#10396) * **runtime-dom:** fix nested v-show priority regression ([364f890](vuejs/core@364f890)), closes [#10338](vuejs/core#10338) * **runtime-dom:** v-bind style should clear previous css string value ([#10373](vuejs/core#10373)) ([e2d3235](vuejs/core@e2d3235)), closes [#10352](vuejs/core#10352) * **suspense:** handle suspense switching with nested suspense ([#10184](vuejs/core#10184)) ([0f3da05](vuejs/core@0f3da05)), closes [#10098](vuejs/core#10098) * **types:** better typing for direct setup signature of defineComponent ([#10357](vuejs/core#10357)) ([eadce5b](vuejs/core@eadce5b)), closes [#8604](vuejs/core#8604) [#8855](vuejs/core#8855) ## [3.4.19](vuejs/core@v3.4.18...v3.4.19) (2024-02-13) ### Bug Fixes * **deps:** pin lru-cache to avoid hashing error ([b8be990](vuejs/core@b8be990)), closes [#10300](vuejs/core#10300) * **hydration:** fix css vars hydration mismatch false positive on non-root nodes ([995d2fd](vuejs/core@995d2fd)), closes [#10317](vuejs/core#10317) [#10325](vuejs/core#10325) * **runtime-dom:** should not trigger transition when v-show value is falsy ([#10311](vuejs/core#10311)) ([e509639](vuejs/core@e509639)) ### Features > Note: this warning is categorized as a feature but released in a patch because it does not affect public APIs. * **dx:** warn users when computed is self-triggering ([#10299](vuejs/core#10299)) ([f7ba97f](vuejs/core@f7ba97f)) ### Performance Improvements * **runtime:** improve `getType()` GC and speed ([#10327](vuejs/core#10327)) ([603a1e1](vuejs/core@603a1e1))

…for (vuejs#10706) close vuejs#10696

fix(compiler-core): Refs inside v-for are not applied through v-bind

ad64013

marcosdissotti reviewed Apr 18, 2024

View reviewed changes

refactor(compiler-core): add in buildProps an auxiliary variable hasVFor

9104300

[autofix.ci] apply automated fixes

88a4a30

refactor: extract pushRefVForMarker + tests

5cce191

yyx990803 merged commit da7adef into vuejs:main Apr 22, 2024

skirtles-code mentioned this pull request May 2, 2024

Refs inside v-for leaking to slots #10851

Open

buqiyuan added a commit to buqiyuan/core that referenced this pull request May 25, 2024

fix(compiler-core): handle template ref bound via v-bind object on v-…

a036021

…for (vuejs#10706) close vuejs#10696

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(compiler-core): Refs inside v-for are not applied through v-bind (fix #10696)#10706

fix(compiler-core): Refs inside v-for are not applied through v-bind (fix #10696)#10706
yyx990803 merged 4 commits into
vuejs:mainfrom
quiteeasy:fix/RefsInsideV-forisNotAppliedThroughV-bind

quiteeasy commented Apr 15, 2024 •

edited by yyx990803

Loading

Uh oh!

marcosdissotti left a comment

Uh oh!

quiteeasy commented Apr 18, 2024

Uh oh!

github-actions Bot commented Apr 22, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

quiteeasy commented Apr 15, 2024 • edited by yyx990803 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marcosdissotti left a comment

Choose a reason for hiding this comment

Uh oh!

quiteeasy commented Apr 18, 2024

Uh oh!

github-actions Bot commented Apr 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

quiteeasy commented Apr 15, 2024 •

edited by yyx990803

Loading

github-actions Bot commented Apr 22, 2024 •

edited

Loading