vue/no-confusing-v-for-v-if

禁止在同一个 v-for 上混淆 v-for 和 v-if 元素

• ⛔ 此规则已在 eslint-plugin-vue v9.0.0 中删除，并由 vue/no-use-v-if-with-v-for 规则替换。

📖 规则详情

此规则报告在以下情况下同时具有 v-for 和 v-if 指令的元素：

¥This rule reports the elements which have both v-for and v-if directives in the following cases:

• v-if 指令不使用对 v-for 指令定义的变量的引用。

  ¥The v-if directive does not use the reference which is to the variables which are defined by the v-for directives.

在这种情况下，v-if 应该写在封装器元素上。

¥In that case, the v-if should be written on the wrapper element.

Now loading...

注意

当它们存在于同一节点时，v-for 的优先级高于 v-if。这意味着 v-if 将在循环的每次迭代中单独运行。

¥When they exist on the same node, v-for has a higher priority than v-if. That means the v-if will be run on each iteration of the loop separately.

https://vuejs.org/guide/essentials/list.html#v-for-with-v-if

🔧选项

¥🔧 Options

无。

¥Nothing.

📚扩展阅读

¥📚 Further Reading

• 样式指南 - 避免使用 v-if 和 v-for

  ¥Style guide - Avoid v-if with v-for

• 指南 - 条件渲染 / v-if 与 v-for

  ¥Guide - Conditional Rendering / v-if with v-for

• 指南 - 列表渲染 / v-for 与 v-if

  ¥Guide - List Rendering / v-for with v-if

🚀版本

¥🚀 Version

此规则在 eslint-plugin-vue v3.0.0 中引入

¥This rule was introduced in eslint-plugin-vue v3.0.0

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source