Skip to content

fix(compiler-ssr): support Set model for checkbox/select v-model in SSR#15036

Open
chatman-media wants to merge 1 commit into
vuejs:mainfrom
chatman-media:fix/ssr-vmodel-set-checkbox-select
Open

fix(compiler-ssr): support Set model for checkbox/select v-model in SSR#15036
chatman-media wants to merge 1 commit into
vuejs:mainfrom
chatman-media:fix/ssr-vmodel-set-checkbox-select

Conversation

@chatman-media

@chatman-media chatman-media commented Jul 1, 2026

Copy link
Copy Markdown

Client-side v-model for checkbox and <select multiple> already branches on isArray/isSet/else (see vModelCheckbox and setSelected in runtime-dom/src/directives/vModel.ts), but the SSR codegen in compiler-ssr and the runtime helpers in server-renderer only checked Array.isArray and fell back to treating the model as a plain truthy value otherwise. So a Set model on the server just diverged from the client - worst case, an empty Set rendered every single checkbox as checked, since new Set() is truthy.

Added an isSet branch alongside the existing array check in both the <option>/checkbox codegen and the ssrRenderDynamicModel/ssrGetDynamicModelProps runtime helpers, mirroring the client logic. Added tests covering select-multiple with a Set, checkbox with a Set, and the empty-Set case specifically (including through the dynamic-type and v-bind codepaths) since that's the one that silently does the wrong thing.

Summary by CodeRabbit

  • New Features

    • SSR v-model now correctly supports Set values for <select> and checkbox inputs, including multiple selection and dynamic cases.
  • Bug Fixes

    • Fixed server-rendered selected and checked states so items in a Set are matched by membership instead of being treated like a single value.
    • Improved consistency for forms using v-model with v-bind and nested option structures.

Client-side v-model already branches isArray/isSet/else for checkbox
and select-multiple, but the SSR codegen and its runtime helpers only
checked Array.isArray and fell through to a plain truthy check. A Set
model rendered every checkbox as checked/every option as selected
regardless of contents (an empty Set rendered everything checked).
@coderabbitai

coderabbitai Bot commented Jul 1, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Adds Set support to Vue's SSR v-model codegen and runtime. A new ssrIsSet/SSR_IS_SET helper is introduced, wired into compiler-ssr's select/checkbox codegen and server-renderer's checkbox helpers, with corresponding snapshot updates and new tests.

Changes

SSR v-model Set support

Layer / File(s) Summary
Register SSR_IS_SET runtime helper
packages/compiler-ssr/src/runtimeHelpers.ts, packages/server-renderer/src/internal.ts
Adds SSR_IS_SET symbol mapped to ssrIsSet in compiler-ssr helpers and re-exports isSet as ssrIsSet from server-renderer internal exports.
Compiler SSR v-model codegen for Set models
packages/compiler-ssr/src/transforms/ssrVModel.ts
Imports createCompoundExpression and SSR_IS_SET; generates .has(value) checks for Set models in select/option selected-state and checkbox checked-state expressions, falling back to prior loose-equality logic otherwise.
Compiler SSR v-model snapshot updates
packages/compiler-ssr/__tests__/ssrVModel.spec.ts
Updates inline snapshots across select variants (single, multiple, v-for, v-if, template, optgroup) and checkbox variants to include ssrIsSet import and the new .has(...) branching.
Server-renderer checkbox Set handling
packages/server-renderer/src/helpers/ssrVModelHelpers.ts
Adds isSet import and Set-aware .has(value) branches to ssrRenderDynamicModel and ssrGetDynamicModelProps checkbox logic.
Server-renderer Set v-model tests
packages/server-renderer/__tests__/ssrDirectives.spec.ts
Adds tests covering select multiple and checkbox v-model with Set models across static, dynamic-type, and v-bind scenarios.

Estimated code review effort: 2 (Simple) | ~15 minutes

Sequence Diagram(s)

Skipped — this PR extends existing branching logic with a new conditional path rather than introducing multi-component sequential interactions.

Suggested labels: scope: ssr, :hammer: p3-minor-bug

Suggested reviewers: sxzz, baiwusanyu-c, yyx990803

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main SSR fix for Set-backed checkbox and select v-model handling.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/server-renderer/src/helpers/ssrVModelHelpers.ts (1)

1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoff

Consider centralizing the array/set/fallback resolution logic.

The array→set→fallback ternary for checkbox "checked" state is now duplicated across four sites (two here, two in ssrVModel.ts codegen). Not a defect, but a shared runtime helper (e.g. ssrResolveModelChecked(model, value)) could reduce duplication and ease future extension (e.g. additional collection types).

Also applies to: 20-26, 45-51

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/server-renderer/src/helpers/ssrVModelHelpers.ts` at line 1, The
array/set/fallback checked-state resolution logic is duplicated in the v-model
SSR helpers; centralize it into a shared runtime helper such as
ssrResolveModelChecked(model, value) and reuse it from ssrVModelHelpers and the
ssrVModel codegen paths. Update the checkbox checked-state handling in the
existing helper functions (including the branches that currently use isArray,
isSet, looseEqual, and looseIndexOf) to call the shared helper so the behavior
stays identical while reducing duplication and making future collection-type
support easier.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/server-renderer/src/helpers/ssrVModelHelpers.ts`:
- Line 1: The array/set/fallback checked-state resolution logic is duplicated in
the v-model SSR helpers; centralize it into a shared runtime helper such as
ssrResolveModelChecked(model, value) and reuse it from ssrVModelHelpers and the
ssrVModel codegen paths. Update the checkbox checked-state handling in the
existing helper functions (including the branches that currently use isArray,
isSet, looseEqual, and looseIndexOf) to call the shared helper so the behavior
stays identical while reducing duplication and making future collection-type
support easier.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 84e7473b-5832-4811-be12-922469242c57

📥 Commits

Reviewing files that changed from the base of the PR and between c0606e9 and aabbb3a.

📒 Files selected for processing (6)
  • packages/compiler-ssr/__tests__/ssrVModel.spec.ts
  • packages/compiler-ssr/src/runtimeHelpers.ts
  • packages/compiler-ssr/src/transforms/ssrVModel.ts
  • packages/server-renderer/__tests__/ssrDirectives.spec.ts
  • packages/server-renderer/src/helpers/ssrVModelHelpers.ts
  • packages/server-renderer/src/internal.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant