From: Evan You <yyx990803@gmail.com>
Date: Wed, 16 Oct 2019 18:05:18 +0000 (-0400)
Subject: feat(compiler-core/v-model): error when v-model is used on scope variable
X-Git-Tag: v3.0.0-alpha.0~397
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=25dd507f71b1df065a81e0cb8623674ae672fa71;p=thirdparty%2Fvuejs%2Fcore.git

feat(compiler-core/v-model): error when v-model is used on scope variable
---

diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index 42f3d8c524..1fde627ac5 100644
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -361,7 +361,7 @@ describe('compiler: transform v-model', () => {
 
   test('should mark update handler dynamic if it refers slot scope variables', () => {
     const root = parseWithVModel(
-      '<Comp v-slot="{ foo }"><input v-model="foo"/></Comp>',
+      '<Comp v-slot="{ foo }"><input v-model="foo.bar"/></Comp>',
       {
         prefixIdentifiers: true
       }
@@ -407,5 +407,20 @@ describe('compiler: transform v-model', () => {
         })
       )
     })
+
+    test('used on scope variable', () => {
+      const onError = jest.fn()
+      parseWithVModel('<span v-for="i in list" v-model="i" />', {
+        onError,
+        prefixIdentifiers: true
+      })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE
+        })
+      )
+    })
   })
 })
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 24b2a107d4..30b839058e 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -81,6 +81,7 @@ export const enum ErrorCodes {
   X_V_SLOT_MISPLACED,
   X_V_MODEL_NO_EXPRESSION,
   X_V_MODEL_MALFORMED_EXPRESSION,
+  X_V_MODEL_ON_SCOPE_VARIABLE,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -171,6 +172,7 @@ export const errorMessages: { [code: number]: string } = {
   [ErrorCodes.X_V_SLOT_MISPLACED]: `v-slot can only be used on components or <template> tags.`,
   [ErrorCodes.X_V_MODEL_NO_EXPRESSION]: `v-model is missing expression.`,
   [ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION]: `v-model value must be a valid JavaScript member expression.`,
+  [ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts
index 00dcc84cf8..b4e35c2cd7 100644
--- a/packages/compiler-core/src/transforms/vModel.ts
+++ b/packages/compiler-core/src/transforms/vModel.ts
@@ -9,7 +9,7 @@ import {
   createInterpolation
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
-import { isMemberExpression } from '../utils'
+import { isMemberExpression, isSimpleIdentifier } from '../utils'
 import { isObject } from '@vue/shared'
 
 export const transformModel: DirectiveTransform = (dir, node, context) => {
@@ -30,6 +30,18 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     return createTransformProps()
   }
 
+  if (
+    !__BROWSER__ &&
+    context.prefixIdentifiers &&
+    isSimpleIdentifier(expString) &&
+    context.identifiers[expString]
+  ) {
+    context.onError(
+      createCompilerError(ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE, exp.loc)
+    )
+    return createTransformProps()
+  }
+
   const propName = arg ? arg : createSimpleExpression('modelValue', true)
   const eventName = arg
     ? arg.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic
diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts
index 9cc60f4934..75abf3887e 100644
--- a/packages/compiler-dom/src/transforms/vModel.ts
+++ b/packages/compiler-dom/src/transforms/vModel.ts
@@ -15,7 +15,12 @@ import {
 } from '../runtimeHelpers'
 
 export const transformModel: DirectiveTransform = (dir, node, context) => {
-  const res = baseTransform(dir, node, context)
+  const baseResult = baseTransform(dir, node, context)
+  // base transform has errors
+  if (!baseResult.props.length) {
+    return baseResult
+  }
+
   const { tag, tagType } = node
   if (tagType === ElementTypes.ELEMENT) {
     if (dir.arg) {
@@ -63,7 +68,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       // by returning the helper symbol via needRuntime
       // the import will replaced a resovleDirective call.
       if (!isInvalidType) {
-        res.needRuntime = context.helper(directiveToUse)
+        baseResult.needRuntime = context.helper(directiveToUse)
       }
     } else {
       context.onError(
@@ -74,5 +79,5 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       )
     }
   }
-  return res
+  return baseResult
 }