fix(compiler-ssr): handle v-model checkbox with true-value binding

This commit is contained in:
Evan You
2020-12-01 12:43:59 -05:00
parent 48f00c0f1b
commit fe5428db12
3 changed files with 80 additions and 13 deletions

View File

@@ -25,7 +25,8 @@ import {
isBindKey,
createSequenceExpression,
InterpolationNode,
isStaticExp
isStaticExp,
AttributeNode
} from '@vue/compiler-dom'
import {
escapeHtml,
@@ -159,6 +160,10 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
for (let i = 0; i < node.props.length; i++) {
const prop = node.props[i]
// ignore true-value/false-value on input
if (node.tag === 'input' && isTrueFalseValue(prop)) {
continue
}
// special cases with children override
if (prop.type === NodeTypes.DIRECTIVE) {
if (prop.name === 'html' && prop.exp) {
@@ -306,6 +311,19 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
}
}
function isTrueFalseValue(prop: DirectiveNode | AttributeNode) {
if (prop.type === NodeTypes.DIRECTIVE) {
return (
prop.name === 'bind' &&
prop.arg &&
isStaticExp(prop.arg) &&
(prop.arg.content === 'true-value' || prop.arg.content === 'false-value')
)
} else {
return prop.name === 'true-value' || prop.name === 'false-value'
}
}
function isTextareaWithValue(
node: PlainElementNode,
prop: DirectiveNode

View File

@@ -71,19 +71,36 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
]
break
case 'checkbox':
res.props = [
createObjectProperty(
`checked`,
createConditionalExpression(
createCallExpression(`Array.isArray`, [model]),
createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
const trueValueBinding = findProp(node, 'true-value')
if (trueValueBinding) {
const trueValue =
trueValueBinding.type === NodeTypes.ATTRIBUTE
? JSON.stringify(trueValueBinding.value!.content)
: trueValueBinding.exp!
res.props = [
createObjectProperty(
`checked`,
createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
model,
value
]),
model
trueValue
])
)
)
]
]
} else {
res.props = [
createObjectProperty(
`checked`,
createConditionalExpression(
createCallExpression(`Array.isArray`, [model]),
createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
model,
value
]),
model
)
)
]
}
break
case 'file':
context.onError(