Fix: allow v-on without attribute values if it has verb modifiers (fixes #49) (#50)

* Fix: allow `v-on` without attribute values if it has verb modifiers (fixes #49)

* Chore: add more tests

Author: mysticatea

docs/rules/no-invalid-v-on.md

@@ -8,7 +8,7 @@ This rule reports `v-on` directives in the following cases:
 
 - The directive does not have that event name. E.g. `<div v-on="foo"></div>`
 - The directive has invalid modifiers. E.g. `<div v-on:click.bbb="foo"></div>`
-- The directive does not have that attribute value. E.g. `<div v-on:click></div>`
+- The directive does not have that attribute value and any verb modifiers. E.g. `<div v-on:click></div>`
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
@@ -31,7 +31,9 @@ This rule does not check syntax errors in directives because it's checked by [no
     <div>
         <div v-on:click="foo"></div>
         <div @click="foo"></div>
-        <div @click.left.prevent="foo"></div>
+        <div @click.left="foo"></div>
+        <div @click.prevent></div>
+        <div @click.stop></div>
     </div>
 </template>
 ```

lib/rules/no-invalid-v-on.js

@@ -20,6 +20,9 @@ const VALID_MODIFIERS = new Set([
   'native', 'once', 'left', 'right', 'middle', 'passive', 'esc', 'tab',
   'enter', 'space', 'up', 'left', 'right', 'down', 'delete'
 ])
+const VERB_MODIFIERS = new Set([
+  'stop', 'prevent'
+])
 
 /**
  * Creates AST event handlers for no-invalid-v-on.
@@ -47,11 +50,11 @@ function create (context) {
           })
         }
       }
-      if (!utils.hasAttributeValue(node)) {
+      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."
+          message: "'v-on' directives require that attribute value or verb modifiers."
         })
       }
     }

tests/lib/rules/no-invalid-v-on.js

@@ -42,6 +42,18 @@ tester.run('no-invalid-v-on', rule, {
     {
       filename: 'test.vue',
       code: '<template><div @keydown.27="foo"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><el-from @submit.native.prevent></el-form></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on:click.prevent></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on:click.native.stop></div></template>'
     }
   ],
   invalid: [
@@ -58,7 +70,12 @@ tester.run('no-invalid-v-on', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-on:click></div></template>',
-      errors: ["'v-on' directives require that attribute value."]
+      errors: ["'v-on' directives require that attribute value or verb modifiers."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @click></div></template>',
+      errors: ["'v-on' directives require that attribute value or verb modifiers."]
     }
   ]
 })