|
12 | 12 | > |
13 | 13 | > https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential |
14 | 14 | |
15 | | - |
16 | 15 | ## :book: Rule Details |
17 | 16 |
|
18 | | -:-1: Examples of **incorrect** code for this rule: |
19 | | - |
20 | | -```html |
21 | | -<TodoItem |
22 | | - v-if="complete" |
23 | | - v-for="todo in todos" |
24 | | - :todo="todo" |
25 | | -/> |
26 | | -``` |
27 | | - |
28 | | -In this case, the `v-if` should be written on the wrapper element. |
| 17 | +This rule is aimed at preventing the use of `v-for` directives together with `v-if` directives on the same element. |
29 | 18 |
|
30 | | - |
31 | | -```html |
32 | | -<TodoItem |
33 | | - v-for="todo in todos" |
34 | | - v-if="todo.shown" |
35 | | - :todo="todo" |
36 | | -/> |
| 19 | +<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error']}"> |
37 | 20 | ``` |
| 21 | +<template> |
| 22 | + <!-- ✓ GOOD --> |
| 23 | + <ul v-if="complete"> |
| 24 | + <TodoItem |
| 25 | + v-for="todo in todos" |
| 26 | + :todo="todo" |
| 27 | + /> |
| 28 | + </ul> |
| 29 | + <TodoItem |
| 30 | + v-for="todo in shownTodos" |
| 31 | + :todo="todo" |
| 32 | + /> |
38 | 33 | |
39 | | -In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list. |
40 | | - |
41 | | - |
42 | | -:+1: Examples of **correct** code for this rule: |
43 | | - |
44 | | - |
45 | | -```html |
46 | | -<ul v-if="complete"> |
| 34 | + <!-- ✗ BAD --> |
47 | 35 | <TodoItem |
| 36 | + v-if="complete" |
48 | 37 | v-for="todo in todos" |
49 | 38 | :todo="todo" |
50 | | - /> |
51 | | -</ul> |
| 39 | + /><!-- ↑ In this case, the `v-if` should be written on the wrapper element. --> |
| 40 | + <TodoItem |
| 41 | + v-for="todo in todos" |
| 42 | + v-if="todo.shown" |
| 43 | + :todo="todo" |
| 44 | + /><!-- ↑ In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list. --> |
| 45 | +</template> |
52 | 46 | ``` |
| 47 | +</eslint-code-block> |
53 | 48 |
|
54 | | - |
55 | | - |
56 | | -```html |
57 | | -<TodoItem |
58 | | - v-for="todo in shownTodos" |
59 | | - :todo="todo" |
60 | | -/> |
61 | | -``` |
| 49 | +## :wrench: Options |
62 | 50 |
|
63 | 51 | ```js |
64 | | -computed:{ |
65 | | - shownTodos() { |
66 | | - returnthis.todos.filter((todo) =>todo.shown) |
67 | | - } |
| 52 | +{ |
| 53 | + "vue/no-use-v-if-with-v-for": ["error", { |
| 54 | + allowUsingIterationVar:false |
| 55 | + }] |
68 | 56 | } |
69 | 57 | ``` |
70 | 58 |
|
71 | | -## :wrench: Options |
| 59 | +-`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`. |
72 | 60 |
|
73 | | -`allowUsingIterationVar` - Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives. |
| 61 | +### { "allowUsingIterationVar": true } |
74 | 62 |
|
75 | | -```js |
76 | | -'vue/no-use-v-if-with-v-for': ['error', { |
77 | | - allowUsingIterationVar: true // default: false |
78 | | -}] |
| 63 | +<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error', {allowUsingIterationVar: true}]}"> |
79 | 64 | ``` |
80 | | - |
81 | | -:+1: Examples of additional **correct** code for this rule with sample `"allowUsingIterationVar": true` options: |
82 | | - |
83 | | -```html |
84 | | -<TodoItem |
85 | | - v-for="todo in todos" |
86 | | - v-if="todo.shown" |
87 | | - :todo="todo" |
88 | | -/> |
89 | | -``` |
90 | | - |
91 | | -:-1: Examples of additional **incorrect** code for this rule with sample `"allowUsingIterationVar": true` options: |
92 | | - |
93 | | -```html |
94 | | -<TodoItem |
95 | | - v-if="complete" |
96 | | - v-for="todo in todos" |
97 | | - :todo="todo" |
98 | | -/> |
| 65 | +<template> |
| 66 | + <!-- ✓ GOOD --> |
| 67 | + <TodoItem |
| 68 | + v-for="todo in todos" |
| 69 | + v-if="todo.shown" |
| 70 | + :todo="todo" |
| 71 | + /> |
| 72 | +</template> |
99 | 73 | ``` |
| 74 | +</eslint-code-block> |
100 | 75 |
|
101 | | -## Related links |
| 76 | +## :books: Further reading |
102 | 77 |
|
103 | 78 | - [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential) |
104 | 79 | - [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for) |
|
0 commit comments