diff --git a/lib/rules/valid-v-on.js b/lib/rules/valid-v-on.js
index 13073d9ab..fceec8c3c 100644
--- a/lib/rules/valid-v-on.js
+++ b/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')."
+ })
+ }
}
}
})
diff --git a/tests/lib/rules/valid-v-on.js b/tests/lib/rules/valid-v-on.js
index f24e10dcf..87420ef3e 100644
--- a/tests/lib/rules/valid-v-on.js
+++ b/tests/lib/rules/valid-v-on.js
@@ -107,12 +107,12 @@ tester.run('valid-v-on', rule, {
{
filename: 'test.vue',
code: '',
- 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: '',
- 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: '',
errors: ["'v-on' directives don't support the modifier 'bar'."],
options: [{ modifiers: ['aaa'] }]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: ['Avoid using JavaScript keyword as "v-on" value: "const".']
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: ['Avoid using JavaScript keyword as "v-on" value: "delete".']
}
]
})