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.

Myungmyxedema

Answer 1

You need to turn off the rule in your eslintrc config options as follows:

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

Reference: https://eslint.org/docs/user-guide/configuring#configuring-rules

I understand that you followed the instructions to set "allowUsingIterationVar": true which is not working. This is because you already specified "error" in the array literal syntax, which turns on the rule as per eslint config guide. As given in the reference page linked above, the first item in the array always indicates rule severity.

In my sample config above, I am using a simple string to turn off the rule as follows:

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

Valvule

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

Snuffy

Answer 3

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://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

Ingold

Agreed, ignoring a problem doesn't make it go away. – Isosceles