解决v-for和v-if一起使用编辑器报错

查找资料

• 官方解释：当它们处于同一节点时，v-for的优先级比v-if更高，这意味着v-if将分别重复运用于每个v-for循环中。当你只想要为部分项渲染节点时，这种优先级的机制会十分有用。
• 翻译一下：v-for和v-if一起使用时，会先执行v-for再执行v-if。
• vue2.x中v-for优先级高于v-if，vue3.x相反。
• 尽量避免在同一个元素上面同时使用v-if和v-for，建议使用计算属性替代。

在Vue中使用v-for循环一个数组/对象时，如果再使用v-if，那么会提示使用计算属性（能正常使用），因为Vue中事不提倡v-for与v-if同时使用的。

<el-tag
	v-for="(item, index) in tagsObj.selectedTags"
   	v-if="label==(item.protocolId)||label==(item.productId)"
   	size="medium"
   	closable
   	:key="item.id"
   	@close="deleteTag(item, index)">
</el-tag>

编辑器报错提示：

[vue/no-use-v-if-with-v-for] The ‘tagsObj.selectedTags’ expression inside ‘v-for’ directive should be replaced with a computed property that returns filtered array instead. You should not mix ‘v-for’ with ‘v-if’.eslint-plugin-vue

修改：用template标签包裹，v-for写在template上，v-if绑定在需要循环的元素上。

<template v-for="(item, index) in tagsObj.selectedTags">
	<el-tag
	   	v-if="label==(item.protocolId)||label==(item.productId)"
	   	size="medium"
	   	closable
	   	:key="item.id"
	   	@close="deleteTag(item, index)">
	</el-tag>
</template>