Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 class="tags has-addons">
                  <span class="tag is-medium">Version Effective Date: </span>
                  <span class="tag is-dark is-medium">{{ x[1] }} </span>
                <div class="tags has-addons">
                  <span class="tag is-medium">Version Expiration Date: </span>
                  <span class="tag is-dark is-medium">{{ x[2] }}</span>
               <a class="button is-dark  is-fullwidth is-medium" @click="showPackages" v-html="xPackageButton"> </a>
          </article>
        <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>
              <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> 
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. 
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 -->
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"
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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.