-
-
Notifications
You must be signed in to change notification settings - Fork 651
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add new
vue/no-use-v-else-with-v-for
(#2224)
Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
- Loading branch information
1 parent
2aa9ac4
commit d1f1eea
Showing
7 changed files
with
206 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-use-v-else-with-v-for | ||
description: disallow using `v-else-if`/`v-else` on the same element as `v-for` | ||
--- | ||
# vue/no-use-v-else-with-v-for | ||
|
||
> disallow using `v-else-if`/`v-else` on the same element as `v-for` | ||
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge> | ||
|
||
## :book: Rule Details | ||
|
||
This rule reports elements that have both `v-else-if`/`v-else` and `v-for` directives. That is valid in Vue (`v-else-if`/`v-else` will take precedence), but is confusing to read. | ||
|
||
<eslint-code-block :rules="{'vue/no-use-v-else-with-v-for': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<div v-if="foo">foo</div> | ||
<template v-else-if="bar"> | ||
<div v-for="x in xs">{{ x }}</div> | ||
</template> | ||
<template v-else> | ||
<div v-for="x in xs">{{ x }}</div> | ||
</template> | ||
<!-- ✗ BAD --> | ||
<div v-if="foo">foo</div> | ||
<div v-else-if="bar" v-for="x in xs">{{ x }}</div> | ||
<div v-else v-for="x in xs">{{ x }}</div> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :wrench: Options | ||
|
||
Nothing. | ||
|
||
## :mute: When Not To Use It | ||
|
||
If you don't find using `v-else-if`/`v-else` together with `v-for` confusing to read, you can safely disable this rule. | ||
|
||
## :couple: Related Rules | ||
|
||
- [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-use-v-else-with-v-for.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-use-v-else-with-v-for.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
'use strict' | ||
|
||
const { defineTemplateBodyVisitor, hasDirective } = require('../utils') | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: | ||
'disallow using `v-else-if`/`v-else` on the same element as `v-for`', | ||
categories: null, | ||
url: 'https://eslint.vuejs.org/rules/no-use-v-else-with-v-for.html' | ||
}, | ||
fixable: null, | ||
schema: [], | ||
messages: { | ||
unexpectedDirectiveWithVFor: | ||
'Unexpected `{{ directiveName }}` and `v-for` on the same element. Move `{{ directiveName }}` to a wrapper element instead.' | ||
} | ||
}, | ||
/** @param {RuleContext} context */ | ||
create(context) { | ||
return defineTemplateBodyVisitor(context, { | ||
/** @param {VDirective} node */ | ||
"VAttribute[directive=true][key.name.name='for']"(node) { | ||
const element = node.parent.parent | ||
|
||
if (hasDirective(element, 'else-if')) { | ||
context.report({ | ||
node: element, | ||
messageId: 'unexpectedDirectiveWithVFor', | ||
data: { directiveName: 'v-else-if' } | ||
}) | ||
} else if (hasDirective(element, 'else')) { | ||
context.report({ | ||
node: element, | ||
messageId: 'unexpectedDirectiveWithVFor', | ||
data: { directiveName: 'v-else' } | ||
}) | ||
} | ||
} | ||
}) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
'use strict' | ||
|
||
const RuleTester = require('eslint').RuleTester | ||
const rule = require('../../../lib/rules/no-use-v-else-with-v-for') | ||
|
||
const tester = new RuleTester({ | ||
parser: require.resolve('vue-eslint-parser'), | ||
parserOptions: { ecmaVersion: 2015 } | ||
}) | ||
|
||
tester.run('no-use-v-else-with-v-for', rule, { | ||
valid: [ | ||
{ | ||
// caught by `vue/no-use-v-if-with-v-for` | ||
filename: 'test.vue', | ||
code: ` | ||
<template> | ||
<div v-if="foo" v-for="x in xs">{{ x }}</div> | ||
</template> | ||
` | ||
}, | ||
{ | ||
// `v-if`/`v-else-if`/`v-else` only | ||
filename: 'test.vue', | ||
code: ` | ||
<template> | ||
<div v-if="foo">{{ x }}</div> | ||
<div v-else-if="foo">{{ x }}</div> | ||
<div v-else="foo">{{ x }}</div> | ||
</template> | ||
` | ||
}, | ||
{ | ||
// `v-for` only | ||
filename: 'test.vue', | ||
code: ` | ||
<template> | ||
<div v-for="x in xs">{{ x }}</div> | ||
</template> | ||
` | ||
}, | ||
{ | ||
// `v-else-if`/`v-else` in template + `v-for` | ||
filename: 'test.vue', | ||
code: ` | ||
<template> | ||
<div v-if="foo">foo</div> | ||
<template v-else-if="bar"> | ||
<div v-for="x in xs">{{ x }}</div> | ||
</template> | ||
<template v-else> | ||
<div v-for="x in xs">{{ x }}</div> | ||
</template> | ||
</template> | ||
` | ||
} | ||
], | ||
invalid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: ` | ||
<template> | ||
<div v-if="foo">foo</div> | ||
<div v-else v-for="x in xs">{{ x }}</div> | ||
</template> | ||
`, | ||
errors: [ | ||
{ | ||
message: | ||
'Unexpected `v-else` and `v-for` on the same element. Move `v-else` to a wrapper element instead.', | ||
line: 4, | ||
endLine: 4, | ||
column: 11, | ||
endColumn: 52 | ||
} | ||
] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: ` | ||
<template> | ||
<div v-if="foo">foo</div> | ||
<div v-else-if="bar" v-for="x in xs">{{ x }}</div> | ||
</template> | ||
`, | ||
errors: [ | ||
{ | ||
message: | ||
'Unexpected `v-else-if` and `v-for` on the same element. Move `v-else-if` to a wrapper element instead.', | ||
line: 4, | ||
endLine: 4, | ||
column: 11, | ||
endColumn: 61 | ||
} | ||
] | ||
} | ||
] | ||
}) |