脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    这篇文章主要介绍了vue.js学习笔记:如何加载本地json文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。
    2017-01-01
  • Element UI 上传组件实现文件上传并附带额外参数功能

    Element UI 上传组件实现文件上传并附带额外参数功能

    在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,怎么操作呢,下面通过示例代码讲解感兴趣的朋友一起看看吧
    2023-08-08
  • Vue实现骨架屏的示例代码

    Vue实现骨架屏的示例代码

    骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构。本文将利用Vue实现简单的骨架屏，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-03-03
  • Vue中transition的使用及说明

    Vue中transition的使用及说明

    这篇文章主要介绍了Vue中transition的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue.js 实现微信公众号菜单编辑器功能(一)

    Vue.js 实现微信公众号菜单编辑器功能(一)

    最近vue.js 非常火热，小编也趁机学习了下vuejs的一些基础知识，于是尝试做一个像微信平台里的菜单编辑器功能，下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家，需要的朋友参考下
    2018-05-05
  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    这篇文章主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    这篇文章主要介绍了vue-router嵌套路由方式(页面路径跳转但页面显示空白)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue项目如何解决数字计算精度问题

    vue项目如何解决数字计算精度问题

    这篇文章主要介绍了vue项目如何解决数字计算精度问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue项目引用百度地图并实现搜索定位等功能(案例分析)

    Vue项目引用百度地图并实现搜索定位等功能(案例分析)

    这篇文章主要介绍了Vue项目引用百度地图并实现搜索定位等功能(案例分析),本篇文章为案例分析，技术点较多，所以篇幅较长，认真阅览的你一定会学到很多知识，需要的朋友可以参考下
    2022-09-09
  • 基于Vue 和 iView分片上传功能实现(上传组件)

    基于Vue 和 iView分片上传功能实现(上传组件)

    本文介绍了基于Vue和iView的文件分片上传技术,通过将文件拆分成多个小块并逐块上传,解决了大文件上传时的诸多问题,如上传速度慢、超时和网络中断等,它还展示了如何实现分片上传的进度显示、错误处理和断点续传等功能,感兴趣的朋友跟随小编一起看看吧
    2025-01-01

最新评论