我有一个包含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>
代码可以正常工作,但问题是,即使我已经添加了规则条目,仍然会出现警告。
我只想要消除这个警告。
谢谢大家。