vuejs v-for和v-if同时使用报变量未定义

复制代码
[Vue warn]: Property "image" was accessed during render but is not defined on instance. 
    at <App> vue.global.js:1630:17
[Vue warn]: Unhandled error during execution of render function 
    at <App>

Uncaught TypeError: image is undefined

查了下官方文档才找到问题所在

vue3和vue2 v-if和v-for同时使用时渲染优先级变了

vue2中v-for优先级高,同时使用v-if可以直接使用v-for的循环体数据

vue3中v-if优先级高,v-if使用v-for循环体数据时数据还未加载,就报未定义了。

无论时vue2还是3,官方都不建议两者一起使用,建议通过template嵌套

vue3文档:https://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-ifhttps://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-if

vue2文档:风格指南 --- Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81

相关推荐
阿湯哥1 分钟前
ReAct智能体
前端·react.js·前端框架
放逐者-保持本心,方可放逐3 分钟前
electron 中的那些事(很关键)-核心要点补充
前端·javascript·electron
战族狼魂4 分钟前
Python 完整实现 BCrypt GUI 工具
java·前端·python
2301_789169544 分钟前
ai讲React 18 + Context API 极简教程 解决深层组件调用父组件里其他组件方法
javascript·react.js·ecmascript
念念不忘 必有回响7 分钟前
vue项目从零开始配置国际化
前端·javascript·vue.js
J_liaty9 分钟前
前后端跨域处理全指南:Java后端+Vue前端完整解决方案
java·前端·vue.js·spring boot·后端
小二·13 分钟前
Python Web 开发进阶实战:国际化(i18n)与多语言支持 —— Vue I18n + Flask-Babel 全栈解决方案
前端·vue.js·python
全栈前端老曹14 分钟前
【包管理】npm最常见的10大问题故障和解决方案
前端·javascript·rust·npm·node.js·json·最佳实践
摘星编程15 分钟前
React Native for OpenHarmony 实战:Easing 动画缓动函数详解
javascript·react native·react.js
weixin_4277716119 分钟前
pnpm 改造
前端