所以我有一个支持v-for和v的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>
代码工作正常,但问题是,即使我已经在规则中添加了一个条目,我仍然会收到警告。
我只想删除警告。
多谢你们。
您需要关闭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"
您可以通过添加如下HTML注释来禁用<template>
中的选择性限制规则:
<!-- 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 -->