theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(vModel): warn if v-model is used on file input (#295)

Browse Source
This commit is contained in:
Cr
2019-10-16 00:23:38 +08:00
committed by Evan You
parent 74d501829c
commit 8eba1aba08
3 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/compiler-dom/src/errors.ts
View File

@@ -26,7 +26,8 @@ export const enum DOMErrorCodes {
X_V_TEXT_NO_EXPRESSION,
X_V_TEXT_WITH_CHILDREN,
X_V_MODEL_ON_INVALID_ELEMENT,
X_V_MODEL_ARG_ON_ELEMENT
X_V_MODEL_ARG_ON_ELEMENT,
X_V_MODEL_ON_FILE_INPUT_ELEMENT
}
export const DOMErrorMessages: { [code: number]: string } = {
@@ -35,5 +36,6 @@ export const DOMErrorMessages: { [code: number]: string } = {
[DOMErrorCodes.X_V_TEXT_NO_EXPRESSION]: `v-text is missing expression.`,
[DOMErrorCodes.X_V_TEXT_WITH_CHILDREN]: `v-text will override element children.`,
[DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
[DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`
[DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
[DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot used on file inputs since they are read-only. Use a v-on:change listener instead.`
}

16
packages/compiler-dom/src/transforms/vModel.ts
View File

@@ -29,6 +29,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
if (tag === 'input' || tag === 'textarea' || tag === 'select') {
let directiveToUse = V_MODEL_TEXT
let isInvalidType = false
if (tag === 'input') {
const type = findProp(node, `type`)
if (type) {
@@ -43,6 +44,15 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
case 'checkbox':
directiveToUse = V_MODEL_CHECKBOX
break
case 'file':
isInvalidType = true
context.onError(
createDOMCompilerError(
DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
dir.loc
)
)
break
}
}
}
@@ -51,8 +61,10 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
}
// inject runtime directive
// by returning the helper symbol via needRuntime
// the import will replace the resovleDirective call.
res.needRuntime = context.helper(directiveToUse)
// the import will replaced a resovleDirective call.
if (!isInvalidType) {
res.needRuntime = context.helper(directiveToUse)
}
} else {
context.onError(
createDOMCompilerError(