feat(RFC0011): add support for custom modifiers in valid-v-model used…

… on Vue component
vuejs · Mar 8, 2020 · 93a1ace · 93a1ace
1 parent 7e4ebde
commit 93a1ace
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
@@ -16,7 +16,7 @@ This rule checks whether every `v-model` directive is valid.
 This rule reports `v-model` directives in the following cases:
 
 - The directive used on HTMLElement has an argument. E.g. `<input v-model:aaa="foo">`
-- The directive has the modifiers which are not supported. E.g. `<input v-model.bbb="foo">`
+- The directive used on HTMLElement has modifiers which are not supported. E.g. `<input v-model.bbb="foo">`
 - The directive does not have that attribute value. E.g. `<input v-model>`
 - The directive does not have the attribute value which is valid as LHS. E.g. `<input v-model="foo() + bar()">`
 - The directive is on unsupported elements. E.g. `<div v-model="foo"></div>`
@@ -33,6 +33,8 @@ This rule reports `v-model` directives in the following cases:
  <textarea v-model="foo"/>
  <MyComponent v-model="foo"/>
  <MyComponent v-model:propName="foo"/>
+ <MyComponent v-model.modifier="foo"/>
+ <MyComponent v-model:propName.modifier="foo"/>
  <div v-for="todo in todos">
  <input v-model="todo.name">
  </div>

diff --git a/lib/rules/valid-v-model.js b/lib/rules/valid-v-model.js
@@ -112,24 +112,27 @@ module.exports = {
  })
  }
 
- if (node.key.argument && !utils.isCustomComponent(element)) {
- context.report({
- node,
- loc: node.loc,
- message: "'v-model' directives require no argument."
- })
- }
-
- for (const modifier of node.key.modifiers) {
- if (!VALID_MODIFIERS.has(modifier.name)) {
+ if (!utils.isCustomComponent(element)) {
+ if (node.key.argument) {
  context.report({
  node,
  loc: node.loc,
- message: "'v-model' directives don't support the modifier '{{name}}'.",
- data: { name: modifier.name }
+ message: "'v-model' directives require no argument."
  })
  }
+
+ for (const modifier of node.key.modifiers) {
+ if (!VALID_MODIFIERS.has(modifier.name)) {
+ context.report({
+ node,
+ loc: node.loc,
+ message: "'v-model' directives don't support the modifier '{{name}}'.",
+ data: { name: modifier.name }
+ })
+ }
+ }
  }
+
  if (!utils.hasAttributeValue(node)) {
  context.report({
  node,

diff --git a/tests/lib/rules/valid-v-model.js b/tests/lib/rules/valid-v-model.js
@@ -118,6 +118,22 @@ tester.run('valid-v-model', rule, {
  {
  filename: 'test.vue',
  code: '<template><MyComponent v-model:aaa="a"></MyComponent></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><MyComponent v-model:aaa.modifier="a"></MyComponent></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><MyComponent v-model.modifier="a"></MyComponent></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><MyComponent v-model:aaa.modifier.modifierTwo="a"></MyComponent></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><MyComponent v-model.modifier.modifierTwo="a"></MyComponent></template>'
  }
  ],
  invalid: [