如何删除 [vue/no-use-v-if-with-v-for] 警告？

Posted 2023-02-22

技术标签:

【中文标题】如何删除 [vue/no-use-v-if-with-v-for] 警告？【英文标题】：How to remove [vue/no-use-v-if-with-v-for] warning? 【发布时间】：2019-06-24 11:01:31 【问题描述】：

所以我有一个 div 元素，它支持 v-for 和 v-if 它工作正常并且输出正确，但是这个警告真的让我很烦：

[vue/no-use-v-if-with-v-for] 'v-for' 指令中的 'prit_type_ids' 变量应替换为返回过滤数组的计算属性。不应将 'v-for' 与 'v-if' 混用。

有没有办法消除这个警告？我已经在我的 .eslintrc.js 中添加了这段代码

来源：https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-use-v-if-with-v-for.md#wrench-options

我把它放在正确的地方了吗？或不。

rules: 
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"vue/no-use-v-if-with-v-for": ["error", 
    "allowUsingIterationVar": true
  ],

所以基本上，有了这个我有一个嵌套循环，其中第一个循环中的特定元素正在比较第二个循环中的值，如果匹配，它将把第二个循环中的数据放在相应列中第一个循环。

代码如下：

    <div class="columns is-mobile" v-if="!loading">
      <div class="column" v-for="x in firstSection" v-bind:key="x[0]">
        <div class="box">
          <article class="media">
            <div class="media-content">
              <div class="content">
                <div class="tags has-addons">
                  <span class="tag is-medium">Version number: </span>
                  <span class="tag is-dark is-medium"> x[0] </span>
                </div>
                <div class="tags has-addons">
                  <span class="tag is-medium">Version Effective Date: </span>
                  <span class="tag is-dark is-medium"> x[1]  </span>
                </div>
                <div class="tags has-addons">
                  <span class="tag is-medium">Version Expiration Date: </span>
                  <span class="tag is-dark is-medium"> x[2] </span>
                </div>
              </div>
              <hr>
               <a class="button is-dark  is-fullwidth is-medium" @click="showPackages" v-html="xPackageButton"> </a>
            </div>
          </article>
        </div>
        <div v-if="xSeen">
          <div class="notification" v-for="(pack, index) in packages" v-bind:key="index" v-if="pack[0] == x[0]">
              <p class="is-size-7"> <strong>  pack[2]  </strong> </p> 
              <p class="is-size-7">   pack[1]  </p>
              <hr>
              <p class="is-size-7">   pack[3]  </p>
              <p class="is-size-7">   pack[4]  </p>

              <div v-for="(param, index) in prit_type_ids" v-bind:key="index" v-if="param[1] == pack[4]">
              <p class="is-size-7">   param[0]   </p> 
              </div>
          </div>
        </div>
      </div>
    </div>

代码可以正常工作，但问题是，即使我已经在规则中添加了一个条目，我仍然会收到警告。

我只想删除警告。

谢谢各位。

【问题讨论】：

【参考方案1】：

您可以在<template> 中通过添加这样的 HTML 注释来禁用选择性 eslint 规则：

<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->

你也可以使用：

<!-- eslint-disable -->

... code that breaks linting ...

<!-- eslint-enable -->

【讨论】：

【参考方案2】：

您需要在 eslintrc 配置选项中关闭该规则，如下所示：

rules: 
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "vue/no-use-v-if-with-v-for": "off"

参考：https://eslint.org/docs/user-guide/configuring#configuring-rules

我了解到您已按照说明设置 "allowUsingIterationVar": true，但此操作无效。这是因为您已经在数组字面量语法中指定了 "error"，这会根据 eslint 配置指南打开规则。如上面链接的参考页面中给出的，数组中的第一项始终表示规则严重性。

在上面的示例配置中，我使用一个简单的字符串来关闭规则，如下所示：