Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

False invalid v-on rule, eslint #614

Closed
ghost opened this issue Oct 18, 2018 · 7 comments
Closed

False invalid v-on rule, eslint #614

ghost opened this issue Oct 18, 2018 · 7 comments
Assignees
Labels

Comments

@ghost
Copy link

ghost commented Oct 18, 2018

I checked the docs and i am using it correctly.
This is error:
screen shot 2018-10-18 at 04 06 00
This is warning:
screen shot 2018-10-18 at 04 07 20

VSCode: 1.28.1
Vetur: 0.13.0
Mac Mojave

@ghost ghost changed the title False invalid v-on rule False invalid v-on rule, eslint Oct 18, 2018
@armano2
Copy link
Contributor

armano2 commented Oct 18, 2018

can you provide example?

@ghost
Copy link
Author

ghost commented Oct 18, 2018

I can't unfortunately. Because it doesn't happen always. This brings the question if i do something wrong but it is fairly simple example. Only difference here is i am inside a component inside another component.
It excepts this syntax btw.
screen shot 2018-10-18 at 05 11 36
also
screen shot 2018-10-18 at 05 14 49
but not this.
screen shot 2018-10-18 at 05 17 32

@ghost
Copy link
Author

ghost commented Oct 18, 2018

Extra:
Care the first line too
screen shot 2018-10-18 at 06 43 51
(very interesting)

@ghost
Copy link
Author

ghost commented Oct 18, 2018

I think it throws error because it is reserved keyword. But should throw related error. Actually in this instance should not throw error.
If i change the name it is ok.
screen shot 2018-10-18 at 06 46 37

What to do?
Shoul i report this eslint repo?

@mysticatea
Copy link
Member

You cannot use delete as a variable name because delete is a reserved word in JavaScript. Also, Vue.js will throw a compile error on the reserved word.

https://jsfiddle.net/q7kzrx02/
image

Now, vue-eslint-parser parses the source code delete, but it's a syntax error because the delete expression requires an argument (e.g., delete obj.a). This is the reason that vue/no-parsing-error said "Unexpected end of expression".
As the result of the parsing error, the attribute @click has no value on AST. This is the reason that vue/valid-v-on said "'v-on' directive requires that attribute value or verb modifiers".

Therefore, @click="delete" is an invalid v-on directive and valid-v-on reports it correctly.
However, maybe we can improve the error message for more understandable.

@ghost
Copy link
Author

ghost commented Oct 18, 2018

Thanks for the explanation. I figured that too. But i thought it ends up as object prop and should be ok.

@metheany
Copy link

metheany commented Jul 7, 2020

I solved this by just replace other words, Example: deleteSomething

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants