fix(compiler-core): fix parsing for directive with dynamic argument c…

…ontaining dots
vuejs · Jun 12, 2020 · 0d26413 · 0d26413
1 parent f39ad0b
commit 0d26413
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 1 deletion.
diff --git a/packages/compiler-core/__tests__/parse.spec.ts b/packages/compiler-core/__tests__/parse.spec.ts
@@ -1015,6 +1015,43 @@ describe('compiler: parse', () => {
       })
     })
 
+    test('directive with dynamic argument', () => {
+      const ast = baseParse('<div v-on:[event]/>')
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        arg: {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: 'event',
+          isStatic: false,
+          isConstant: false,
+
+          loc: {
+            source: '[event]',
+            start: {
+              column: 11,
+              line: 1,
+              offset: 10
+            },
+            end: {
+              column: 18,
+              line: 1,
+              offset: 17
+            }
+          }
+        },
+        modifiers: [],
+        exp: undefined,
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { offset: 17, line: 1, column: 18 },
+          source: 'v-on:[event]'
+        }
+      })
+    })
+
     test('directive with a modifier', () => {
       const ast = baseParse('<div v-on.enter/>')
       const directive = (ast.children[0] as ElementNode).props[0]
@@ -1088,6 +1125,43 @@ describe('compiler: parse', () => {
       })
     })
 
+    test('directive with dynamic argument and modifiers', () => {
+      const ast = baseParse('<div v-on:[a.b].camel/>')
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        arg: {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: 'a.b',
+          isStatic: false,
+          isConstant: false,
+
+          loc: {
+            source: '[a.b]',
+            start: {
+              column: 11,
+              line: 1,
+              offset: 10
+            },
+            end: {
+              column: 16,
+              line: 1,
+              offset: 15
+            }
+          }
+        },
+        modifiers: ['camel'],
+        exp: undefined,
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { offset: 21, line: 1, column: 22 },
+          source: 'v-on:[a.b].camel'
+        }
+      })
+    })
+
     test('v-bind shorthand', () => {
       const ast = baseParse('<div :a=b />')
       const directive = (ast.children[0] as ElementNode).props[0]

diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
@@ -599,7 +599,7 @@ function parseAttribute(
   const loc = getSelection(context, start)
 
   if (!context.inVPre && /^(v-|:|@|#)/.test(name)) {
-    const match = /(?:^v-([a-z0-9-]+))?(?:(?::|^@|^#)([^\.]+))?(.+)?$/i.exec(
+    const match = /(?:^v-([a-z0-9-]+))?(?:(?::|^@|^#)(\[[^\]]+\]|[^\.]+))?(.+)?$/i.exec(
       name
     )!