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同时使用的。
在我的项目中也遇到了问题，不过翻看文档解决了。修改前：

?

1 2 3 4 5 6 7 8 9 10

<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

修改后：

?

1 2 3 4 5 6 7 8 9 10 11

<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一起使用时的坑