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. 计算属性会根据依赖的响应式数据自动更新,确保逻辑的正确性。
相关推荐
蓝胖子的多啦A梦33 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
海天胜景39 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
用户3802258598241 小时前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
源码站~2 小时前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
江城开朗的豌豆2 小时前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
加减法原则2 小时前
Vue 模板引用(ref)全面指南:从基础到高级应用
vue.js
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
快起来别睡了2 小时前
Vue 响应式系统与 `computed` 属性详解:小白也能学会的完整指南
vue.js
江城开朗的豌豆2 小时前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
opbr2 小时前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js