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. 计算属性会根据依赖的响应式数据自动更新,确保逻辑的正确性。
相关推荐
ziyue75751 小时前
vue修改element-ui的默认的class
前端·vue.js·ui
程序定小飞3 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
BumBle3 小时前
uniapp 用css实现圆形进度条组件
前端·vue.js·uni-app
Komorebi_99994 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
二十雨辰5 小时前
vite性能优化
前端·vue.js
明月与玄武5 小时前
浅谈 富文本编辑器
前端·javascript·vue.js
FuckPatience6 小时前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js
aklry6 小时前
elpis之学习总结
前端·vue.js
FuckPatience8 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
Komorebi_99998 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js