Fix #614 - Improve errors in valid-v-on, detect forbidden keywords

lib/rules/valid-v-on.js

@@ -136,6 +136,7 @@ module.exports = {
   create (context) {
     const options = context.options[0] || {}
     const customModifiers = new Set(options.modifiers || [])
+    const sourceCode = context.getSourceCode()
 
     return utils.defineTemplateBodyVisitor(context, {
       "VAttribute[directive=true][key.name='on']" (node) {
@@ -149,12 +150,26 @@ module.exports = {
             })
           }
         }
-        if (!utils.hasAttributeValue(node) && !node.key.modifiers.some(VERB_MODIFIERS.has, VERB_MODIFIERS)) {
-          context.report({
-            node,
-            loc: node.loc,
-            message: "'v-on' directives require that attribute value or verb modifiers."
-          })
+
+        if (
+          !utils.hasAttributeValue(node) &&
+          !node.key.modifiers.some(VERB_MODIFIERS.has, VERB_MODIFIERS)
+        ) {
+          if (node.value && sourceCode.getText(node.value.expression)) {
+            const value = sourceCode.getText(node.value)
+            context.report({
+              node,
+              loc: node.loc,
+              message: 'Avoid using JavaScript keyword as "v-on" value: {{value}}.',
+              data: { value }
+            })
+          } else {
+            context.report({
+              node,
+              loc: node.loc,
+              message: "'v-on' directives require a value or verb modifier (like 'stop' or 'prevent')."
+            })
+          }
         }
       }
     })

tests/lib/rules/valid-v-on.js

@@ -107,12 +107,12 @@ tester.run('valid-v-on', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-on:click></div></template>',
-      errors: ["'v-on' directives require that attribute value or verb modifiers."]
+      errors: ["'v-on' directives require a value or verb modifier (like 'stop' or 'prevent')."]
     },
     {
       filename: 'test.vue',
       code: '<template><div @click></div></template>',
-      errors: ["'v-on' directives require that attribute value or verb modifiers."]
+      errors: ["'v-on' directives require a value or verb modifier (like 'stop' or 'prevent')."]
     },
     {
       filename: 'test.vue',
@@ -125,6 +125,16 @@ tester.run('valid-v-on', rule, {
       code: '<template><div @keydown.bar.aaa="foo"></div></template>',
       errors: ["'v-on' directives don't support the modifier 'bar'."],
       options: [{ modifiers: ['aaa'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @click="const"></div></template>',
+      errors: ['Avoid using JavaScript keyword as "v-on" value: "const".']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @click="delete"></div></template>',
+      errors: ['Avoid using JavaScript keyword as "v-on" value: "delete".']
     }
   ]
 })