update no-use-v-if-with-v-for

Author: mysticatea

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

@@ -12,93 +12,68 @@
 >
 > https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential
 
-
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<TodoItem
-  v-if="complete"
-  v-for="todo in todos"
-  :todo="todo"
-/>
-```
-
-In this case, the `v-if` should be written on the wrapper element.
+This rule is aimed at preventing the use of `v-for` directives together with `v-if` directives on the same element.
 
-
-```html
-<TodoItem
-  v-for="todo in todos"
-  v-if="todo.shown"
-  :todo="todo"
-/>
+<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error']}">
 ```
+<template>
+  <!-- ✓ GOOD -->
+  <ul v-if="complete">
+    <TodoItem
+      v-for="todo in todos"
+      :todo="todo"
+    />
+  </ul>
+  <TodoItem
+    v-for="todo in shownTodos"
+    :todo="todo"
+  />
 
-In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list.
-
-
-:+1: Examples of **correct** code for this rule:
-
-
-```html
-<ul v-if="complete">
+  <!-- ✗ BAD -->
   <TodoItem
+    v-if="complete"
     v-for="todo in todos"
     :todo="todo"
-  />
-</ul>
+  /><!-- ↑ In this case, the `v-if` should be written on the wrapper element. -->
+  <TodoItem
+    v-for="todo in todos"
+    v-if="todo.shown"
+    :todo="todo"
+  /><!-- ↑ In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list. -->
+</template>
 ```
+</eslint-code-block>
 
-
-
-```html
-<TodoItem
-  v-for="todo in shownTodos"
-  :todo="todo"
-/>
-```
+## :wrench: Options
 
 ```js
-computed: {
-  shownTodos() {
-    return this.todos.filter((todo) => todo.shown)
-  }
+{
+  "vue/no-use-v-if-with-v-for": ["error", {
+    allowUsingIterationVar: false
+  }]
 }
 ```
 
-## :wrench: Options
+- `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`.
 
-`allowUsingIterationVar` - Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives.
+### { "allowUsingIterationVar": true }
 
-```js
-'vue/no-use-v-if-with-v-for': ['error', {
-  allowUsingIterationVar: true // default: false
-}]
+<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error', {allowUsingIterationVar: true}]}">
 ```
-
-:+1: Examples of additional **correct** code for this rule with sample `"allowUsingIterationVar": true` options:
-
-```html
-<TodoItem
-  v-for="todo in todos"
-  v-if="todo.shown"
-  :todo="todo"
-/>
-```
-
-:-1: Examples of additional **incorrect** code for this rule with sample `"allowUsingIterationVar": true` options:
-
-```html
-<TodoItem
-  v-if="complete"
-  v-for="todo in todos"
-  :todo="todo"
-/>
+<template>
+  <!-- ✓ GOOD -->
+  <TodoItem
+    v-for="todo in todos"
+    v-if="todo.shown"
+    :todo="todo"
+  />
+</template>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
 - [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for)