diff --git a/docs/rules/index.md b/docs/rules/index.md
index 2b4ff512f..abc3419a4 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -118,7 +118,6 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives | | :three::two::warning: |
| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives | | :three::two::warning: |
| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives | | :three::two::warning: |
-| [vue/no-root-v-if](./no-root-v-if.md) | enforce valid `v-if` directives on root element | | :three::two::warning: |
| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives | | :three::two::warning: |
| [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives | | :three::warning: |
| [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives | | :three::warning: |
@@ -241,6 +240,7 @@ For example:
| [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props | :bulb: | :hammer: |
| [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute | | :hammer: |
| [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` | | :hammer: |
+| [vue/no-root-v-if](./no-root-v-if.md) | disallow `v-if` directives on root element | | :hammer: |
| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes | | :hammer: |
| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: |
| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method | | :warning: |
diff --git a/docs/rules/no-root-v-if.md b/docs/rules/no-root-v-if.md
index 835721ace..8b48c7c01 100644
--- a/docs/rules/no-root-v-if.md
+++ b/docs/rules/no-root-v-if.md
@@ -2,13 +2,14 @@
pageClass: rule-details
sidebarDepth: 0
title: vue/no-root-v-if
-description: enforce valid `v-if` directives on root element
+description: disallow `v-if` directives on root element
---
+
# vue/no-root-v-if
-> enforce valid `v-if` directives on root element
+> disallow `v-if` directives on root element
-- :exclamation: ***This rule has not been released yet.***
+- :exclamation: **_This rule has not been released yet._**
This rule checks whether every template root is valid.
@@ -19,12 +20,9 @@ This rule reports the template root in the following cases:
```vue
-
-
-
```
diff --git a/lib/index.js b/lib/index.js
index 1c1ca74ca..c7b580868 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -124,6 +124,7 @@ module.exports = {
'no-restricted-static-attribute': require('./rules/no-restricted-static-attribute'),
'no-restricted-syntax': require('./rules/no-restricted-syntax'),
'no-restricted-v-bind': require('./rules/no-restricted-v-bind'),
+ 'no-root-v-if': require('./rules/no-root-v-if'),
'no-setup-props-destructure': require('./rules/no-setup-props-destructure'),
'no-shared-component-data': require('./rules/no-shared-component-data'),
'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
@@ -220,7 +221,6 @@ module.exports = {
'valid-v-else': require('./rules/valid-v-else'),
'valid-v-for': require('./rules/valid-v-for'),
'valid-v-html': require('./rules/valid-v-html'),
- 'no-root-v-if': require('./rules/no-root-v-if'),
'valid-v-if': require('./rules/valid-v-if'),
'valid-v-is': require('./rules/valid-v-is'),
'valid-v-memo': require('./rules/valid-v-memo'),
diff --git a/lib/rules/no-root-v-if.js b/lib/rules/no-root-v-if.js
index 6040d29d2..304ef3f12 100644
--- a/lib/rules/no-root-v-if.js
+++ b/lib/rules/no-root-v-if.js
@@ -7,35 +7,11 @@
const utils = require('../utils')
-/**
- * Get the number of root element directive
- * @param {VNode[]} rootElements The start tag node to check.
- */
-function getDirectivesLength(rootElements) {
- let ifLength = 0
- let elseLength = 0
- let elseIfLength = 0
-
- for (const element of rootElements) {
- if (element.type === 'VElement') {
- if (utils.hasDirective(element, 'if')) ifLength += 1
- if (utils.hasDirective(element, 'else')) elseLength += 1
- if (utils.hasDirective(element, 'else-if')) elseIfLength += 1
- }
- }
-
- return {
- ifLength,
- elseLength,
- elseIfLength
- }
-}
-
module.exports = {
meta: {
- type: 'problem',
+ type: 'suggestion',
docs: {
- description: 'enforce valid `v-if` directives on root element',
+ description: 'disallow `v-if` directives on root element',
categories: undefined,
url: 'https://eslint.vuejs.org/rules/no-root-v-if.html'
},
@@ -53,10 +29,10 @@ module.exports = {
}
const rootElements = element.children.filter(utils.isVElement)
- if (rootElements.length === 0) return
- const { ifLength, elseLength, elseIfLength } =
- getDirectivesLength(rootElements)
- if (ifLength === 1 && elseLength === 0 && elseIfLength === 0) {
+ if (
+ rootElements.length === 1 &&
+ utils.hasDirective(rootElements[0], 'if')
+ ) {
context.report({
node: element,
loc: element.loc,
diff --git a/tests/lib/rules/no-root-v-if.js b/tests/lib/rules/no-root-v-if.js
index 4c776f8b9..766c5b2ad 100644
--- a/tests/lib/rules/no-root-v-if.js
+++ b/tests/lib/rules/no-root-v-if.js
@@ -94,6 +94,10 @@ tester.run('no-root-v-if', rule, {
{
filename: 'test.vue',
code: ' '
+ },
+ {
+ filename: 'test.vue',
+ code: ''
}
],
invalid: [
@@ -106,11 +110,6 @@ tester.run('no-root-v-if', rule, {
filename: 'test.vue',
code: '',
errors: ['`v-if` should not be used on root element without `v-else`.']
- },
- {
- filename: 'test.vue',
- code: '',
- errors: ['`v-if` should not be used on root element without `v-else`.']
}
]
})