root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(ssr): render correct initial selected state for select with v-model (#7432) 

close #7392
This commit is contained in:
edison 2023-07-11 17:13:18 +08:00 committed by GitHub
parent 3decc57d0c
commit 201c46df07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/compiler-ssr/__tests__/ssrVModel.spec.ts
View File

@ -33,6 +33,44 @@ describe('ssr: v-model', () => {
`)
})
test('<select v-model>', () => {
expect(
compileWithWrapper(
`<select v-model="model"><option value="1"></option></select>`
).code
).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><select><option value=\\"1\\"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"1\\")
: _ssrLooseEqual(_ctx.model, \\"1\\"))) ? \\" selected\\" : \\"\\"
}></option></select></div>\`)
}"
`)
expect(
compileWithWrapper(
`<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`
).code
).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><select multiple><option value=\\"1\\" selected></option><option value=\\"2\\"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"2\\")
: _ssrLooseEqual(_ctx.model, \\"2\\"))) ? \\" selected\\" : \\"\\"
}></option></select></div>\`)
}"
`)
})
test('<input type="radio">', () => {
expect(
compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code

33
packages/compiler-ssr/src/transforms/ssrVModel.ts
View File

@ -18,7 +18,8 @@ import {
import {
SSR_LOOSE_EQUAL,
SSR_LOOSE_CONTAIN,
SSR_RENDER_DYNAMIC_MODEL
SSR_RENDER_DYNAMIC_MODEL,
SSR_INCLUDE_BOOLEAN_ATTR
} from '../runtimeHelpers'
import { DirectiveTransformResult } from 'packages/compiler-core/src/transform'
@ -129,8 +130,34 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
checkDuplicatedValue()
node.children = [createInterpolation(model, model.loc)]
} else if (node.tag === 'select') {
// NOOP
// select relies on client-side directive to set initial selected state.
node.children.forEach(option => {
if (option.type === NodeTypes.ELEMENT) {
const plainNode = option as PlainElementNode
if (plainNode.props.findIndex(p => p.name === 'selected') === -1) {
const value = findValueBinding(plainNode)
plainNode.ssrCodegenNode!.elements.push(
createConditionalExpression(
createCallExpression(context.helper(SSR_INCLUDE_BOOLEAN_ATTR), [
createConditionalExpression(
createCallExpression(`Array.isArray`, [model]),
createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
model,
value
]),
createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
model,
value
])
)
]),
createSimpleExpression(' selected', true),
createSimpleExpression('', true),
false /* no newline */
)
)
}
}
})
} else {
context.onError(
createDOMCompilerError(

24
packages/server-renderer/__tests__/ssrDirectives.spec.ts
View File

@ -107,6 +107,30 @@ describe('ssr: directives', () => {
).toBe(`<input type="radio">`)
})
test('select', async () => {
expect(
await renderToString(
createApp({
data: () => ({ model: 1 }),
template: `<select v-model="model"><option value="0"></option><option value="1"></option></select>`
})
)
).toBe(
`<select><option value="0"></option><option value="1" selected></option></select>`
)
expect(
await renderToString(
createApp({
data: () => ({ model: [0, 1] }),
template: `<select multiple v-model="model"><option value="0"></option><option value="1"></option></select>`
})
)
).toBe(
`<select multiple><option value="0" selected></option><option value="1" selected></option></select>`
)
})
test('checkbox', async () => {
expect(
await renderToString(