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.2 KiB
2.2 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | ||||
|---|---|---|---|---|---|---|---|---|
| v-for Range Iteration Starts at 1, Not 0 | LOW | v-for with a number range starts at 1, unlike JavaScript arrays which start at 0 | gotcha |
|
v-for Range Iteration Starts at 1, Not 0
Impact: LOW - When using v-for with a number (range iteration), the iteration starts at 1, not 0. This differs from typical JavaScript behavior where arrays are 0-indexed.
This gotcha commonly causes off-by-one errors when the generated numbers are used for calculations or array indexing.
Task Checklist
- Remember
v-for="n in 10"produces 1 through 10, not 0 through 9 - When using range values for array indexing, subtract 1:
items[n - 1] - Consider creating a computed array if you need 0-based indices
Incorrect Assumption:
<!-- Developer expects 0-9, but gets 1-10 -->
<span v-for="n in 10">{{ n }}</span>
<!-- Output: 1 2 3 4 5 6 7 8 9 10 -->
<!-- WRONG: Off-by-one error when used for array access -->
<li v-for="n in items.length" :key="n">
{{ items[n].name }} <!-- Error! items[10] is undefined when length is 10 -->
</li>
Correct:
<!-- Correct understanding: 1-based range -->
<span v-for="n in 10" :key="n">{{ n }}</span>
<!-- Output: 1 2 3 4 5 6 7 8 9 10 -->
<!-- CORRECT: Adjust index for array access -->
<li v-for="n in items.length" :key="n">
{{ items[n - 1].name }} <!-- n-1 converts to 0-based -->
</li>
<!-- BETTER: Just iterate the array directly -->
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.name }} <!-- index is 0-based, add 1 for display -->
</li>
<!-- Range for repeating elements (no array involved) -->
<div v-for="n in 3" :key="n" class="skeleton-row">
Loading placeholder {{ n }} of 3...
</div>
<!-- Output: Loading placeholder 1 of 3, 2 of 3, 3 of 3 -->
When Range Iteration Is Useful
- Rendering a fixed number of placeholder/skeleton elements
- Creating pagination buttons:
v-for="page in totalPages" - Generating star ratings:
v-for="star in 5" - Repeating template structures a set number of times