8000 Update require-component-is & no-use-v-if-with-v-for · vuejs/eslint-plugin-vue@1e07433 · GitHub
[go: up one dir, main page]
Skip to content

Commit 1e07433

Browse files
armano2armano2
committed
Update require-component-is & no-use-v-if-with-v-for
1 parent 8cb6530 commit 1e07433

File tree

3 files changed

+22
-26
lines changed

3 files changed

+22
-26
lines changed

‎docs/rules/no-unused-components.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
44

5-
This rule reports components that haven't been used in the template.
6-
75
## :book: Rule Details
86

7+
This rule reports components that haven't been used in the template.
8+
99
:-1: Examples of **incorrect** code for this rule:
1010

1111
```html

‎docs/rules/no-use-v-if-with-v-for.md

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@
22

33
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
44

5-
> Never use `v-if` on the same element as `v-for`.
6-
>
7-
> There are two common cases where this can be tempting:
8-
>
9-
> * To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
10-
>
11-
> * To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
12-
>
13-
> https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential
14-
155
## :book: Rule Details
166

177
This rule is aimed at preventing the use of `v-for` directives together with `v-if` directives on the same element.
188

9+
There are two common cases where this can be tempting:
10+
* To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
11+
* To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
12+
1913
<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error']}">
2014
```
2115
<template>
@@ -58,7 +52,7 @@ This rule is aimed at preventing the use of `v-for` directives together with `v-
5852

5953
- `allowUsingIterationVar` (`boolean`) ... Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives. Default is `false`.
6054

61-
### { "allowUsingIterationVar": true }
55+
### `"allowUsingIterationVar": true`
6256

6357
<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error', {allowUsingIterationVar: true}]}">
6458
```

‎docs/rules/require-component-is.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,29 @@
22

33
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
44

5-
> You can use the same mount point and dynamically switch between multiple components using the reserved `<component>` element and dynamically bind to its `is` attribute:
6-
>
7-
> https://vuejs.org/v2/guide/components.html#Dynamic-Components
8-
95
## :book: Rule Details
106

117
This rule reports the `<component>` elements which do not have `v-bind:is` attributes.
128

13-
: DEA8 -1: Examples of **incorrect** code for this rule:
149

15-
```html
16-
<component/>
17-
<component is="type"/>
10+
<eslint-code-block :rules="{'vue/require-component-is': ['error']}">
11+
```vue
12+
<template>
13+
<!-- ✓ GOOD -->
14+
<component :is="type"/>
15+
<component v-bind:is="type"/>
16+
17+
<!-- ✗ BAD -->
18+
<component/>
19+
<component is="type"/>
20+
</template>
1821
```
22+
</eslint-code-block>
1923

20-
:+1: Examples of **correct** code for this rule:
24+
::: warning Note
25+
You can use the same mount point and dynamically switch between multiple components using the reserved `<component>` element and dynamically bind to its `is` attribute.
26+
:::
2127

22-
```html
23-
<component :is="type"/>
24-
<component v-bind:is="type"/>
25-
```
2628

2729
## :wrench: Options
2830

0 commit comments

Comments
 (0)
0