Vue 中,使用 v-for 和 v-if 在同一个元素上时,出现报错,怎么解决

直接上报错图:

上图所示,其实就是 因为 v-for 的优先级比 v-if 高,Vue 会先尝试遍历 v-for 里面,然后再检查 v-if 的条件,这可能会导致意外的行为或错误。

解决办法有两种:

1.常见办法,也就是编辑器提醒的,使用 template 包裹 v-for ,优先 v-if

javascript 复制代码
<template>
  <el-table>
    <template v-if="approveInfo">
      <el-table-column v-for="item in plusRatio" :key="item" :prop="item.prop" :label="item.label">
        <!-- 列的内容 -->
      </el-table-column>
    </template>
  </el-table>
</template>

首先判断 approveInfo 的值,只有当 approveInfo 为 true 时,才会渲染 template 内部的元素。

2.使用计算属性来过滤数据

javascript 复制代码
<template>
  <el-table>
     <el-table-column v-for="item in filteredPlusRatio" :key="item" :prop="item.prop" :label="item.label">
       <!-- 列的内容 -->
     </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      approveInfo: true,
      plusRatio: [
        { prop: 'ratio1', label: '比例 1' },
        { prop: 'ratio2', label: '比例 2' },
        // 其他数据
      ]
    };
  },
  computed: {
    filteredPlusRatio() {
      if (this.approveInfo) {
        return this.plusRatio;
      } else {
        return [];
      }
    }
  }
};
</script>

根据 approveInfo 的值决定是否返回 plusRatio 数组或空数组,确保只有在 approveInfo 为 true 时才渲染 el-table-column。

注意点

  1. 避免在 v-for 内部使用 v-if,因为 v-for 优先级高,会导致不必要的性能开销。
  2. 计算属性会根据依赖的响应式数据自动更新,确保逻辑的正确性。
相关推荐
晨枫阳13 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技15 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte15 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin15 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击15 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder16 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202616 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737416 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星18 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin18 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序