uni-app v-for遍历对象无法使用第三个参数index v-for="(val,key,index) in obj" 其中index为undefined

uni-app v-for遍历对象无法使用第三个参数index v-for="(val,key,index) in obj" 其中index为undefined

类别 信息
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 window 10
HBuilderX类型 正式
HBuilderX版本 3.1.6
工具版本 1.05
基础库版本 2.15
项目创建方式 HBuilderX

操作步骤：

<view v-for="(val,key,index) in order.shipGoods" :key="key" class="item flex align-stretch">  
    <text>{{index}}</text>  
</view>

预期结果：

循环输出下标, 从0开始

实际结果：

下标为undefined

bug描述：

<view v-for="(val,key,index) in order.shipGoods" :key="key" class="item flex align-stretch">  
    <text>{{index}}</text>  
</view>

其中index 是undefined
在vue中是支持遍历对象时第三个参数是index


更多关于uni-app v-for遍历对象无法使用第三个参数index v-for="(val,key,index) in obj" 其中index为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

根据文档描述目前小程序端未支持

更多关于uni-app v-for遍历对象无法使用第三个参数index v-for="(val,key,index) in obj" 其中index为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


后续会考虑优化

还没搞好吗

回复 2***@qq.com: 优先级+1，可以先试试vue3版的

在 uni-app 中，v-for 遍历对象时第三个参数 index 在某些平台（如小程序）可能不被支持，这与 Vue.js 在 Web 环境中的行为不同。uni-app 的模板编译受限于平台差异，对象遍历通常只提供 (value, key) 两个参数。建议改用数组遍历或通过计算属性将对象转换为数组形式，例如：

computed: {
  shipGoodsList() {
    return Object.entries(this.order.shipGoods).map(([key, val], index) => ({
      key,
      val,
      index
    }));
  }
}

模板中改为：

<view v-for="item in shipGoodsList" :key="item.key">
  <text>{{ item.index }}</text>
</view>
回到顶部