脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 v-if和v-for同时使用产生的问题

Vue3中当v-if和v-for同时使用时产生的问题和解决办法

 更新时间：2024年07月28日 10:20:57   作者：努力搞米  
封装一个组件时,我使用到了v-for和v-if,它们在同一标签内,总是提示v-for循环出来的item在实例中没有被定义,查询资料后原因是因为v-for和v-if在同级使用时,v-if优先级比v-for高,所以本文给大家介绍了Vue3中当v-if和v-for同时使用时产生的问题和解决办法

问题

封装一个组件时，我使用到了v-for和v-if，它们在同一标签内，总是提示v-for循环出来的item在实例中没有被定义，查询资料后原因是因为v-for和v-if在同级使用时，v-if优先级比v-for高，所以拿不到v-for循环出来的item。

<el-table-column
      align="center"
      v-for="item in tableData"
      v-if="item.show"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :sortable="item.sortable ? 'custom' : false"
      :width="item.width"
      :formatter="item.formatter"
      class="tooltip-column"
    >
    </el-table-column>

解决办法：

1.我们在外层包裹一个 <template> ，先去循环再去判断，这样v-if就可以正常使用了

<template v-for="item in columns">
      <el-table-column
        align="center"
        v-if="item.show"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sortable ? 'custom' : false"
        :width="item.width"
        :formatter="item.formatter"
        class="tooltip-column"
      >
      </el-table-column>
    </template>

2.不使用template标签，我们可以在script中处理

使用计算属性computed解决，通过数组方法filter过滤数组，v-for直接循环计算属性后的结果，就不需要使用v-if了。而且computed是有缓存的，就是在它的依赖没有变化时，不会再执行对应计算属性的回调函数，就提高了性能。

// 计算属性：处理显示列
const tableColumns = computed(() => {
  return props.columns.filter((item) =>
    typeof item.show === "undefined" ? true : item.show
  );
});
<el-table-column
      align="center"
      v-for="item in tableColumns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :sortable="item.sortable ? 'custom' : false"
      :width="item.width"
      :formatter="item.formatter"
      class="tooltip-column"
    >
    </el-table-column>

到此这篇关于Vue3中当v-if和v-for同时使用时产生的问题和解决办法的文章就介绍到这了,更多相关Vue3 v-if和v-for同时使用产生的问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue axios 表单提交上传图片的实例

    vue axios 表单提交上传图片的实例

    下面小编就为大家分享一篇vue axios 表单提交上传图片的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue使用recorder.js实现录音功能

    vue使用recorder.js实现录音功能

    这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • vue arco.design锚点Anchor使用方式

    vue arco.design锚点Anchor使用方式

    这篇文章主要介绍了vue arco.design锚点Anchor使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    本篇文章主要介绍了详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue在.js文件中引入store和router问题

    vue在.js文件中引入store和router问题

    这篇文章主要介绍了vue在.js文件中引入store和router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vue-json-editor json编辑器的使用

    vue-json-editor json编辑器的使用

    本文主要介绍了vue-json-editor json编辑器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue.config.js中配置分包策略及常见的配置选项

    vue.config.js中配置分包策略及常见的配置选项

    在Vue.js中分包（Code Splitting）是一种将应用程序代码拆分为不同的块或包的技术,从而在需要时按需加载这些包,下面这篇文章主要给大家介绍了关于vue.config.js中配置分包策略及常见的配置选项的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue3+Element Plus实现自定义穿梭框的详细代码

    vue3+Element Plus实现自定义穿梭框的详细代码

    找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件,本文给大家分享vue3+Element Plus实现自定义穿梭框的示例代码,感兴趣的朋友一起看看吧
    2024-01-01
  • vue打包之后配置统一请求地址步骤详解

    vue打包之后配置统一请求地址步骤详解

    这篇文章主要为大家介绍了vue打包之后配置统一请求地址实现步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07

最新评论