b553c4e519
- API 路由统一: 移除 /api/h5/，统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api（与服务名一致） - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据（SOC/电压/电流/功率） - DB: 所有 TIMESTAMP 列改为 DATETIME（修复类型不匹配） - 用户管理: 新增创建时间/修改时间列，状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标，颜色统一 - PC 二维码: canvas 渲染，含编号文字，支持右键下载 - H5: 按 uni-app 规范修正导航（navigateTo 替代 reLaunch） - H5: 详情页加返回导航条 - H5: 扫码支持摄像头（jsQR）+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项（设备/通道/空闲/充电/充满/故障） - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件，补充缺失规范章节
2.6 KiB
2.6 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | |||||
|---|---|---|---|---|---|---|---|---|---|
| Always Pass v-for Data to Components via Props | MEDIUM | Components have isolated scope - v-for iteration data is not automatically available inside child components | gotcha |
|
Always Pass v-for Data to Components via Props
Impact: MEDIUM - Vue components have isolated scope by design. When using v-for to render components, the iteration variable (e.g., item) is NOT automatically available inside the child component. You must explicitly pass the data through props.
This isolation is intentional - it keeps components reusable and their data dependencies explicit. Forgetting to pass props results in undefined data or errors about missing properties.
Task Checklist
- Always bind iteration data to component props explicitly
- Pass both the item and index if the component needs them
- Always include a unique
:keywhen rendering components with v-for - Define corresponding props in the child component to receive the data
Incorrect:
<!-- WRONG: Component cannot access 'todo' - it's not in scope -->
<TodoItem v-for="todo in todos" :key="todo.id" />
<!-- Inside TodoItem.vue: this.todo or todo is undefined! -->
<!-- WRONG: Key provided but no data passed -->
<UserCard
v-for="user in users"
:key="user.id"
/>
<!-- UserCard has no user data to display -->
Correct:
<!-- CORRECT: Explicitly pass the item as a prop -->
<TodoItem
v-for="todo in todos"
:key="todo.id"
:todo="todo"
/>
<!-- CORRECT: Pass multiple pieces of data -->
<UserCard
v-for="(user, index) in users"
:key="user.id"
:user="user"
:index="index"
:is-first="index === 0"
/>
<!-- Child component: UserCard.vue -->
<script setup>
defineProps({
user: {
type: Object,
required: true
},
index: {
type: Number,
required: true
},
isFirst: {
type: Boolean,
default: false
}
})
</script>
<template>
<div class="user-card">
<span>{{ index + 1 }}. {{ user.name }}</span>
<span v-if="isFirst">(First User)</span>
</div>
</template>
Why Explicit Props?
- Clear data flow: Makes dependencies explicit and traceable
- Reusability: Components work anywhere, not just inside specific v-for loops
- Type safety: Props can be validated with type and required checks
- Maintainability: Easier to understand what data a component needs