Comment supprimer [VUE / NON-NON-UTIL-UTIL-V-with-V-for] Avertissement?

Question

J'ai donc un élément divisé qui prend en charge V-pour et V-si cela fonctionne bien et que la sortie est correcte, mais cet avertissement m'énerve vraiment:

[VUE/NON-NON-UTIL-V-V-SI-WIT-V-V-POUR] La variable de la "pritylpe_ids" à l'intérieur de la directive "V-for" doit être remplacée par une propriété calculée qui renvoie la matrice filtrée à la place. Vous ne devez pas mélanger 'V-pour' avec 'V-si'.

Y a-t-il un moyen de supprimer cet avertissement? J'ai déjà ajouté ce bloc de code dans mon .eslintrc.js

Source: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/roules/no-uuse-v-if-with-v-for.md#wreen -Options

Est-ce que je l'ai mis au bon endroit? ou pas.

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

Donc, fondamentalement, avec cela, j'ai une boucle imbriquée, où comme un élément spécifique de la première boucle comparait une valeur de la deuxième boucle, si elle correspond, elle mettra les données de la 2e boucle dans la colonne respective de la 1ère boucle de la 1ère boucle. .

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

Les codes fonctionnent bien, mais la chose est, j'ai toujours l'avertissement, même si j'ajoute déjà une entrée dans les règles.

Je veux juste supprimer l'avertissement.

Merci les gars.

Answer 1

Je comprends que vous avez demandé spécifiquement de savoir comment ignorer cet avertissement, mais c'est un rappel pour d'autres personnes qui pourraient bénéficier davantage de la fixer au lieu de l'ignorer:

L'avertissement est là pour une bonne raison, il vous avertit parce que cette approche diminuera les performances. Vous ferez donc mieux de suivre les conseils de Linter et de remplacer cela par une propriété calculée, ce qui sera plus rapide en raison de la mise en cache de propriété calculée.

https://vuejs.org/v2/guide/computed.html#Comp député-caching-vs-methods