在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡v-for与v-if同时使用的。
在我的项目中也遇到了问题,不过翻看文档解决了。
修改前:
第一种 用elementUI
<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>
第二中种,用div的
<div class="type-list" v-for="(item, index) in types" :key="index" v-if="item.id !=0">
</div>
编辑器提示
: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
修改后:
第一种 用elementUI
<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>
第二中种,用div的
<template v-for="(item, index) in types">
<div class="type-list" :key="index" v-if="item.id !=0">
</div>
</template>
参考:https://www.cnblogs.com/rainbow70626/p/15832553.html
最后
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!