[VUE / NO-USE-V-IF-IF-IF-IF-IF-IF-IF]警告を削除する方法

Question

そのため、V-forとV-fongがうまく機能している場合はV-forをサポートするDIV要素があり、出力が正しいですが、この警告は本当に私を悩ませます。

[VUE/NO USE-V-IF-v-for] 'v-for'ディレクティブ内の 'prit_type_ids'変数は、代わりにフィルタリングされた配列を返すコンピュータプロパティに置き換えます。あなたは 'v-for'を 'v-if'と混ぜてはいけません。

この警告を削除する方法はありますか？私はすでにこのコードブロックを私の.slintrc.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
  }],
}
 _

そのように、基本的に、最初のループ内の特定の要素が2番目のループからの値を比較しているネストされたループがある場合は、それが一致すると、1次ループのそれぞれの列の2番目のループからデータが表示されます。 。

これがコードです：

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

コードは大丈夫ですが、そのことはまだ警告を持っていますが、私はすでにルールにエントリを追加していますが。

警告を取り除きたいだけです。

みんなありがとう。

Answer 1

私はあなたがこの警告を無視する方法について具体的に尋ねたことを理解していますが、これはそれを無視する代わりにそれを修正するのをもっと恩恵を受けることができる他の人のためのリマインダーです。

このアプローチはパフォーマンスを低下させるため、警告が警告されているので、このアプローチはパフォーマンスを低下させるため、充実したプロパティに置き換えます。

https://vuejs.org/v2/guide/computed.html#computed-caching-vs-methods