因此,我有一个支持v-for和v-if的div元素(如果它可以正常工作并且输出正确),但是此警告确实使我烦恼:
[vue / no-use-v-if-with-v-for] “ v-for”指令中的“ prit_type_ids”变量应替换为返回过滤后数组的计算属性。您不应将“ v-for”与“ v-if”混合使用。
是否有消除此警告的方法?我已经在.eslintrc.js
中添加了此代码块我把它放在正确的位置了吗?或不。
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
}],
}
所以基本上,我有了一个嵌套循环,其中作为第一个循环中的一个特定元素正在比较第二个循环中的值,如果匹配,它将把第二个循环中的数据放在各自的列上第一个循环。
这是代码:
<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>
代码工作正常,但事实是,即使我已经在规则中添加了一个条目,我仍然会收到警告。
我只想删除警告。
谢谢大家。
答案 0 :(得分:1)
您可以通过添加如下HTML注释来禁用<template>
中的选择性eslint规则:
<!-- 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 -->
答案 1 :(得分:1)
您需要按以下步骤在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"
答案 2 :(得分:0)
我知道您专门询问了如何忽略此警告,但这提醒其他人,他们可能会从修复它而不是忽略它中受益更多:
警告是有充分理由的,它会警告您,因为这种方法会降低性能,因此您最好遵循 linter 的建议并将其替换为计算属性,这会更快,因为计算属性缓存的方式
https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods