Rule proposal: Incorrect binding to a directive that already binds to expression

[Phlow2001]

Please describe what the rule should do:

I have come across this error in code several times now. We use ':' on attributes so often that sometimes we don't realize that we've done it on well-known directives.

<input :v-model="field">

Instead of binding field to the model, it renders a v-model attribute on the html element.

I think it makes sense to error about this for the following well-known directives accepting expressions: v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v-on, v-bind, v-model

What category of rule is this? (place an "X" next to just one item)

[ ] Enforces code style
[X] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

<!-- ✘ BAD -->
<input :v-model="foo">
<input :v-if="foo">

<!-- ✓ GOOD -->
<input v-model="foo">
<input v-if="foo">

Why should this rule be included in ESLint (instead of a plugin)?
Because it's a very easy mistake to make, has very few use-cases to allow it, and can eliminate a class of bugs in templates.

[mysticatea]

Thank you for the proposal.

Sounds nice to me to support newcomers. I think that the rule should report all v-bind directives that their argument starts with v-. Maybe it's named no-v-bind-v.

[michalsnik]

I like this proposition too 👍 I'd go with:

• no-directive-bindings
• no-bind-on-directive
• no-v-directive-binding
• or no-bind-v-directive

Let's keep it more descriptive :)
WDYT?

[Phlow2001]

Any of those sound good to me. I think widening the scope to all attributes starting with 'v-' is reasonable. I kept it narrow in my proposal just in case there was some interesting use case that I wasn't aware of.

[chrisvfritz]

My personal favorite is no-bind-on-directive. 🙂