uni-app 小程序循环多了一层$orig 导致无法取值

uni-app 小程序循环多了一层$orig 导致无法取值

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 4.01
手机系统 iOS
手机系统版本 iOS 17
手机厂商 苹果
手机机型 piphone13
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

<view>{{ item.user.nickname }}  
<view class="name-tips" v-if="item.user.officialLogo.length > 0">  
  <image lazy-load :src="icon.Logo_official" alt="" class="logo_faxian_img"></image>  
  {{ item.user.officialLogo[0] || '' }}  
</view>  
<view v-if="item.user.tag === 1" class="logo_faxian">  
  <image lazy-load :src="icon.logo_faxian" alt="" class="logo_faxian_img"></image>  
</view>

预期结果：

正常取值

实际结果：

多一层$orig 对象导致无法取值

bug描述：

使用cli构建项目，原来运行正常，最近重新安装了配置项，就报这个错


更多关于uni-app 小程序循环多了一层$orig 导致无法取值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

代码不全，给全看看

更多关于uni-app 小程序循环多了一层$orig 导致无法取值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


下面贴代码了

代码打印，多一层结构


data1打印，里面是没有这个是嘛

hbuilderx版本呢

回复 蔡cai: 数据里面没有这个 我用的是cli构建的uniapp项目

回复 蔡cai: 年前都是好的 年后来node_modules包从新安装了 就出这个问题了

回复 4***@qq.com: 你可以创建一个新的页面，弄个简单数据看会不会出现这种情况

回复 4***@qq.com: 那排查下依赖咯

回复 蔡cai: 嗯 我在看依赖

最后咋解决的,我也遇到了一样的问题

解决了么，同样的问题

哥们，解决了吗？我也出现了

在 uni-app 小程序开发中，如果你在循环数据时发现多了一层 $orig，这通常是因为你使用了某些状态管理库（如 vuex）或数据绑定工具，导致数据被包装了一层。

问题原因

$orig 通常是某些数据绑定工具（如 vuex 的 mapState）在处理数据时自动添加的，用于标识原始数据。如果你直接使用 $orig，可能会导致无法正确取值。

解决方法

  1. 直接使用原始数据 如果你确定数据已经被正确处理，可以直接使用原始数据，而不是通过 $orig 来访问。

    <template>
  <view v-for="item in list" :key="item.id">
    {{ item.name }}
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
    };
  },
};
</script>

  2. 使用计算属性 如果数据来自 vuex 或其他状态管理库，可以使用计算属性来获取原始数据。

    <template>
  <view v-for="item in normalizedList" :key="item.id">
    {{ item.name }}
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['list']),
    normalizedList() {
      return this.list.$orig || this.list;
    },
  },
};
</script>

  3. 使用 JSON.parse 和 JSON.stringify 如果数据被包装了一层 $orig，你可以使用 JSON.parse 和 JSON.stringify 来去掉这一层。

    <template>
  <view v-for="item in parsedList" :key="item.id">
    {{ item.name }}
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ].$orig, // 假设数据被包装了一层 $orig
    };
  },
  computed: {
    parsedList() {
      return JSON.parse(JSON.stringify(this.list));
    },
  },
};
</script>
回到顶部