v-for和v-if一起使用時的坑：The 'XXX' 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'

目的：Vue - ElementUI中循環渲染表格，控制字段的顯示與隱藏 v-if與v-for同時使用。

在Vue中使用v-for循環一個數組/對象時，如果再使用v-if，那么會提示使用計算屬性(能正常使用)，因為Vue中是不提倡v-for與v-if同時使用的。
在我的項目中也遇到了問題，不過翻看文檔解決了。修改前：

<el-table-column
	v-for="(item, index) in columns"
	:prop="item.prop" 
	:key="index" 
	align="center"
	:width="item.width"
	:label="item.label"
	v-if="item.show"
>
></el-table-column>

編輯器提示：vue/no-use-v-if-with-v-for] The 'columns' variable 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="(item, index) in columns">
	<el-table-column
		:prop="item.prop" 
		:key="index" 
		align="center"
		:width="item.width || '' "
		:label="item.label"
		v-if="item.show"
	>
	</el-table-column>
</template>

　　即：使用template標簽包裹即可，v-for 寫在template 上，v-if 綁定在需要循環的元素之上即可

 

原文鏈接：Vue - ElementUI中循環渲染表格，控制字段的顯示與隱藏 v-if與v-for同時使用

其它鏈接：

1、v-for和v-if一起使用時的坑

2、v-for和v-if一起使用時的坑