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

Question

我有一个包含v-for和v-if指令的div元素，它可以正常工作并且输出是正确的，但是这个警告真的很烦人：

[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>

代码可以正常工作，但问题是，即使我已经添加了规则条目，仍然会出现警告。

我只想要消除这个警告。

谢谢大家。

- Jude Medina

Answer 1

您可以通过添加类似以下的HTML注释，在<template>中禁用特定的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 -->

- Manish

Answer 2

您需要根据以下步骤在您的eslintrc配置选项中关闭规则：
您需要在您的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配置指南，这会启用规则。如上面链接的参考页面所述，数组中的第一项始终表示规则的严重程度。

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

"vue/no-use-v-if-with-v-for": "off"

- Mani

Answer 3

我知道你特别询问如何忽略这个警告，但这是提醒其他人更有益于修复它而不是忽略它的原因：

警告存在的原因是很好的，它警告你因为这种方法会降低性能，所以最好遵循linter的建议，用计算属性来替换它，由于计算属性缓存的方式，它将更快。

https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

- Ahmed Elkoussy

---

同意，忽略问题并不能让它消失。 - Riza Khan