How to remove [vue/no-use-v-if-with-v-for] warning?

Question

So I have a div element that supports v-for and v-if it works fine and the output is correct, but this warning really annoys me:

[vue/no-use-v-if-with-v-for] The 'prit_type_ids' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.

Is there a way to remove this warning? I already added this block of code in my .eslintrc.js

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

Did i put it in the right place? or not.

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
  }],
}

So basically, with this I have a nested loop, where as a specific element in the first loop is comparing a value from the second loop, if it matches, it will put the data from the 2nd loop in the respective column on the 1st loop.

Here is the code:

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

Codes work fine but the thing is, I still have the warning even though I already add an entry in to the rules.

I just want to remove the warning.

Thanks guys.

Answer 1

I understand you asked specifically on how to ignore this warning, but this is a reminder for others who might benefit more from fixing it instead of ignoring it:

The warning is there for a good reason, it warns you because this approach will decrease performance, so you better follow the advice of the linter and replace this with a computed property, which will be faster because of how the computed property caching

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

Answer 2

You can disable selective eslint rules in your <template> by adding an HTML comment like this:

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

You may also use:

<!-- eslint-disable -->

... code that breaks linting ...

<!-- eslint-enable -->