vue v-if 与 v-for 同时使用报错

作者: tww844475003 分类: 前端开发 发布时间: 2021-05-22 19:29

在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

<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>
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注