Как удалить предупреждение [vue / no-use-v-if-with-v-for]? - PullRequest
Новая
       50

Как удалить предупреждение [vue / no-use-v-if-with-v-for]?

0 голосов
/ 31 января 2019

Итак, у меня есть элемент div, который поддерживает v-for и v-if, если он работает нормально и вывод правильный, но это предупреждение меня действительно раздражает:

[vue / no-use-v-if-with-v-for] Переменная 'prit_type_ids' внутри директивы 'v-for' должна быть заменена вычисляемым свойством, которое вместо этого возвращает отфильтрованный массив.Вы не должны смешивать 'v-for' с 'v-if'.

Есть ли способ удалить это предупреждение?Я уже добавил этот блок кода в мой .eslintrc.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-м цикле.

Вот код: 

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

Коды работают нормально, но дело в том, что у меня все еще есть предупреждение, хотя я уже добавляю запись в правила.

Я просто хочу снять предупреждение.

Спасибо, ребята.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Вам необходимо отключить правило в параметрах конфигурации eslintrc следующим образом: 

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

Ссылка: https://eslint.org/docs/user-guide/configuring#configuring-rules

Я понимаю, что вы следовали инструкциям для установки "allowUsingIterationVar": trueкоторый не работает.Это потому, что вы уже указали "error" в буквальном синтаксисе массива, который включает правило в соответствии с руководством по настройке eslint.Как указано на приведенной выше странице ссылки, первый элемент в массиве всегда указывает на серьезность правила.

В приведенном выше примере конфигурации я использую простую строку для отключения правила следующим образом: 

"vue/no-use-v-if-with-v-for": "off"
0 голосов
/ 31 января 2019

Вы можете отключить выборочные правила eslint в вашем <template>, добавив HTML-комментарий, подобный этому: 

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

Вы также можете использовать: 

<!-- eslint-disable -->

... code that breaks linting ...

<!-- eslint-enable -->
...