diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index aff05acdc..3415520e8 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -8,7 +8,7 @@ So when they exist on the same node, `v-if` directive should use the reference w
## 📖 Rule Details
-This rule reports the elements which have both `v-for` and `v-if` directives if the following cases:
+This rule reports the elements which have both `v-for` and `v-if` directives in the following cases:
- The `v-if` directive does not use the reference which is to the variables which are defined by the `v-for` directives.
diff --git a/docs/rules/no-invalid-template-root.md b/docs/rules/no-invalid-template-root.md
index aa8c40d43..15f4a6d6e 100644
--- a/docs/rules/no-invalid-template-root.md
+++ b/docs/rules/no-invalid-template-root.md
@@ -4,16 +4,21 @@ This rule checks whether every template root is valid.
## 📖 Rule Details
-This rule reports the template root if the following cases:
+This rule reports the template root in the following cases:
+- The root is nothing. E.g. ``.
- The root is text. E.g. `hello`.
- The root is multiple elements. E.g. `
one
two
`.
- The root element has `v-for` directives. E.g. `
{{x}}
`.
-- The root element has `v-if`/`v-else-if` directives without `v-else` elements. E.g. `
hello
`.
- The root element is `` or `` elements. E.g. `hello`.
👎 Examples of **incorrect** code for this rule:
+```html
+
+
+```
+
```html
hello
@@ -33,17 +38,17 @@ This rule reports the template root if the following cases:
```
+👍 Examples of **correct** code for this rule:
+
```html
-
+
abc
```
-👍 Examples of **correct** code for this rule:
-
```html
-
abc
+
```
diff --git a/docs/rules/no-invalid-v-bind.md b/docs/rules/no-invalid-v-bind.md
index 2815096f5..c9c2b8c64 100644
--- a/docs/rules/no-invalid-v-bind.md
+++ b/docs/rules/no-invalid-v-bind.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-bind` directive is valid.
## 📖 Rule Details
-This rule reports `v-bind` directives if the following cases:
+This rule reports `v-bind` directives in the following cases:
- The directive does not have that attribute value. E.g. ``
- The directive has invalid modifiers. E.g. ``
diff --git a/docs/rules/no-invalid-v-cloak.md b/docs/rules/no-invalid-v-cloak.md
index ed6e34c36..cf8f68045 100644
--- a/docs/rules/no-invalid-v-cloak.md
+++ b/docs/rules/no-invalid-v-cloak.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-cloak` directive is valid.
## 📖 Rule Details
-This rule reports `v-cloak` directives if the following cases:
+This rule reports `v-cloak` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-else-if.md b/docs/rules/no-invalid-v-else-if.md
index 53e49df3c..7876a1a99 100644
--- a/docs/rules/no-invalid-v-else-if.md
+++ b/docs/rules/no-invalid-v-else-if.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-else-if` directive is valid.
## 📖 Rule Details
-This rule reports `v-else-if` directives if the following cases:
+This rule reports `v-else-if` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-else.md b/docs/rules/no-invalid-v-else.md
index 6ca238d47..530c57696 100644
--- a/docs/rules/no-invalid-v-else.md
+++ b/docs/rules/no-invalid-v-else.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-else` directive is valid.
## 📖 Rule Details
-This rule reports `v-else` directives if the following cases:
+This rule reports `v-else` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-for.md b/docs/rules/no-invalid-v-for.md
index 820811e19..5dc6619b2 100644
--- a/docs/rules/no-invalid-v-for.md
+++ b/docs/rules/no-invalid-v-for.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-for` directive is valid.
## 📖 Rule Details
-This rule reports `v-for` directives if the following cases:
+This rule reports `v-for` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-html.md b/docs/rules/no-invalid-v-html.md
index 573bdba89..5998861ca 100644
--- a/docs/rules/no-invalid-v-html.md
+++ b/docs/rules/no-invalid-v-html.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-html` directive is valid.
## 📖 Rule Details
-This rule reports `v-html` directives if the following cases:
+This rule reports `v-html` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-if.md b/docs/rules/no-invalid-v-if.md
index 330ef0bb5..f746e9332 100644
--- a/docs/rules/no-invalid-v-if.md
+++ b/docs/rules/no-invalid-v-if.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-if` directive is valid.
## 📖 Rule Details
-This rule reports `v-if` directives if the following cases:
+This rule reports `v-if` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-model.md b/docs/rules/no-invalid-v-model.md
index de5adcfe2..e7ab254d8 100644
--- a/docs/rules/no-invalid-v-model.md
+++ b/docs/rules/no-invalid-v-model.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-model` directive is valid.
## 📖 Rule Details
-This rule reports `v-model` directives if the following cases:
+This rule reports `v-model` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has the modifiers which are not supported. E.g. ``
diff --git a/docs/rules/no-invalid-v-on.md b/docs/rules/no-invalid-v-on.md
index 38da1e6e6..0076bdd1c 100644
--- a/docs/rules/no-invalid-v-on.md
+++ b/docs/rules/no-invalid-v-on.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-on` directive is valid.
## 📖 Rule Details
-This rule reports `v-on` directives if the following cases:
+This rule reports `v-on` directives in the following cases:
- The directive does not have that event name. E.g. ``
- The directive has invalid modifiers. E.g. ``
diff --git a/docs/rules/no-invalid-v-once.md b/docs/rules/no-invalid-v-once.md
index 8f5ab7b13..852d6fadd 100644
--- a/docs/rules/no-invalid-v-once.md
+++ b/docs/rules/no-invalid-v-once.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-once` directive is valid.
## 📖 Rule Details
-This rule reports `v-once` directives if the following cases:
+This rule reports `v-once` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-pre.md b/docs/rules/no-invalid-v-pre.md
index 989120333..e66b0bdd5 100644
--- a/docs/rules/no-invalid-v-pre.md
+++ b/docs/rules/no-invalid-v-pre.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-pre` directive is valid.
## 📖 Rule Details
-This rule reports `v-pre` directives if the following cases:
+This rule reports `v-pre` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-show.md b/docs/rules/no-invalid-v-show.md
index 1a13ef881..fe0c3fb0b 100644
--- a/docs/rules/no-invalid-v-show.md
+++ b/docs/rules/no-invalid-v-show.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-show` directive is valid.
## 📖 Rule Details
-This rule reports `v-show` directives if the following cases:
+This rule reports `v-show` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/docs/rules/no-invalid-v-text.md b/docs/rules/no-invalid-v-text.md
index 39e966202..2b9513a2b 100644
--- a/docs/rules/no-invalid-v-text.md
+++ b/docs/rules/no-invalid-v-text.md
@@ -4,7 +4,7 @@ This rule checks whether every `v-text` directive is valid.
## 📖 Rule Details
-This rule reports `v-text` directives if the following cases:
+This rule reports `v-text` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
diff --git a/lib/rules/no-invalid-template-root.js b/lib/rules/no-invalid-template-root.js
index 8b34dacf9..17f73cb87 100644
--- a/lib/rules/no-invalid-template-root.js
+++ b/lib/rules/no-invalid-template-root.js
@@ -31,13 +31,14 @@ function create (context) {
return
}
+ const hasSrc = utils.hasAttribute(node.startTag, 'src')
const rootElements = []
let extraText = null
let extraElement = null
let vIf = false
for (const child of node.children) {
if (child.type === 'VElement') {
- if (rootElements.length === 0) {
+ if (rootElements.length === 0 && !hasSrc) {
rootElements.push(child)
vIf = utils.hasDirective(child.startTag, 'if')
} else if (vIf && utils.hasDirective(child.startTag, 'else-if')) {
@@ -53,7 +54,13 @@ function create (context) {
}
}
- if (extraText != null) {
+ if (hasSrc && (extraText != null || extraElement != null)) {
+ context.report({
+ node: extraText || extraElement,
+ loc: (extraText || extraElement).loc,
+ message: "The template root with 'src' attribute is required to be empty."
+ })
+ } else if (extraText != null) {
context.report({
node: extraText,
loc: extraText.loc,
@@ -65,7 +72,7 @@ function create (context) {
loc: extraElement.loc,
message: 'The template root requires exactly one element.'
})
- } else if (rootElements.length === 0) {
+ } else if (rootElements.length === 0 && !hasSrc) {
context.report({
node,
loc: node.loc,
@@ -92,14 +99,6 @@ function create (context) {
})
}
}
- if (vIf) {
- const tag = rootElements[0].startTag
- context.report({
- node: tag,
- loc: tag.loc,
- message: "The template root requires the next element which has 'v-else' directives if it has 'v-if' directives."
- })
- }
}
}
}
diff --git a/tests/lib/rules/no-invalid-template-root.js b/tests/lib/rules/no-invalid-template-root.js
index 89a38c7b8..cc4979fcc 100644
--- a/tests/lib/rules/no-invalid-template-root.js
+++ b/tests/lib/rules/no-invalid-template-root.js
@@ -50,6 +50,18 @@ tester.run('no-invalid-template-root', rule, {
{
filename: 'test.vue',
code: `\n \n \n \n`
+ },
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
}
],
invalid: [
@@ -90,23 +102,23 @@ tester.run('no-invalid-template-root', rule, {
},
{
filename: 'test.vue',
- code: '',
- errors: ["The template root requires the next element which has 'v-else' directives if it has 'v-if' directives."]
+ code: '',
+ errors: ["The template root disallows '' elements."]
},
{
filename: 'test.vue',
- code: '',
- errors: ["The template root requires the next element which has 'v-else' directives if it has 'v-if' directives."]
+ code: '',
+ errors: ["The template root disallows '' elements."]
},
{
filename: 'test.vue',
- code: '',
- errors: ["The template root disallows '' elements."]
+ code: 'abc',
+ errors: ["The template root with 'src' attribute is required to be empty."]
},
{
filename: 'test.vue',
- code: '',
- errors: ["The template root disallows '' elements."]
+ code: '',
+ errors: ["The template root with 'src' attribute is required to be empty."]
}
]
})