uni-app 嵌套使用v-for时，子v-for的in由一个方法返回导致父v-for的item变成错误结果

uni-app 嵌套使用v-for时，子v-for的in由一个方法返回导致父v-for的item变成错误结果

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.18

第三方开发者工具版本号：微信开发者工具 1.0.5.2105170

基础库版本号：2.17.3

项目创建方式：HBuilderX

### 示例代码：

```javascript
<template>  
    <div>  
        <div v-for="(item,index) in [{num:1}]" :key="index">  
            <div v-for="(btn,index0) in action()" @click="handleTap(item)" :key="index0">  
                点击显示item的值  
            </div>  
        </div>  
    </div>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: {  
                    $orig: { num: 1 },  
                    l0: [2, 3]  
                },  
            }  
        }  
    },  
    methods: {  
        action() {  
            return [2, 3]  
        },  
        handleTap(item) {  
            console.log("handleTap item", item)  
        },  
    }  
    }  
</script>  
<style>  
</style>

操作步骤：

点击按钮，将item的结果打印到控制台。

预期结果：

请看附件1 item的结果应该是：{ num:1 }

实际结果：

请看附件2 item的实际结果是：

{
    $orig: { num: 1 },
    l0: [2, 3]
}

相当于item的结果被包装进了$orig这个字段。

bug描述：

嵌套使用 v-for 的时候，子 v-for 的 in 如果由一个方法返回，父v-for的item变成了一个非预期的结果。item的结果看附件，正确的结果被包装进了$orig字段。


更多关于uni-app 嵌套使用v-for时，子v-for的in由一个方法返回导致父v-for的item变成错误结果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

这个bug影响很大，请管理员务必解决

更多关于uni-app 嵌套使用v-for时，子v-for的in由一个方法返回导致父v-for的item变成错误结果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


一年多了，bug还在，而且本来没这个bug的项目在新编辑器中也开始出现问题了

麻烦管理员看一下

管理员什么时候能看下这个bug吗？

管理员就不能看一眼这个大bug吗？

已处理，等待下次 alpha 版更新后会通知你。

回复 4***@qq.com: 最新 alpha 版已修复

最新 alpha 版已修复

我还是遇到了啊

回复 6***@qq.com: 说一下具体情况

这是一个典型的 uni-app 嵌套 v-for 渲染优化问题。当子级 v-for 使用函数返回值作为数据源时，uni-app 的渲染机制会对父级 item 进行特殊处理，导致数据被包装。

问题分析：

  • 父级 v-for 的 item 原本应该是 {num:1}
  • 但由于子级 action() 方法返回数组，uni-app 在优化渲染时对数据进行了包装
  • 实际得到的 item 变成了包含 $orig 字段的包装对象

解决方案：

  1. 避免在模板中直接调用方法 - 将数据预先计算并存储在 data 中
data() {
  return {
    parentList: [{num:1}],
    childList: [2, 3] // 替代 action() 方法
  }
}
  1. 修改模板引用方式
<div v-for="(item,index) in parentList" :key="index">
  <div v-for="(btn,index0) in childList" @click="handleTap(item)" :key="index0">
    点击显示item的值
  </div>
</div>
  1. 如果必须使用方法，在点击事件中解构原始数据
handleTap(item) {
  const originalItem = item.$orig || item
  console.log("handleTap item", originalItem)
}
回到顶部