uni-app cli项目 v-for渲染不了数据

uni-app cli项目 v-for渲染不了数据

开发环境 版本号 项目创建方式
Windows 2.0.0-alpha-32620210901001 CLI 
产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

页面类型：vue

打包方式：云端

CLI版本号：2.0.0-alpha-32620210901001

App下载地址或H5网址：[无](//ask.dcloud.net.cn/无)

### 示例代码：

```html
<template>  
  <view>  
    <view>test</view>  
    <view>test</view>  
    <view>test</view>  
    <view>test</view>  
    <view>test</view>  
    <view>test</view>  
    <view v-for="item in test" :key="`test-${item}`">test1</view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      test: [1, 2, 3, 4, 5, 6, 7, 8, 9, 8]  
    }  
  }  
}  
</script>  

<style>  
</style>

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

web端正常，app异常：组件的上面正常渲染，下面的for循环却渲染不了


更多关于uni-app cli项目 v-for渲染不了数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app cli项目 v-for渲染不了数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的代码和描述，这是一个典型的 uni-app CLI 项目中 v-for 在 App 端渲染异常的问题。从你的代码来看，问题可能出在以下几个方面：

  1. 数据响应性问题：虽然你的 test 数组在 data() 中定义，但在某些情况下，如果数据在组件生命周期中被修改，可能会遇到响应性问题。可以尝试在 mounted 或 onLoad 中重新赋值数据，例如：

    mounted() {
  this.test = [...this.test];
}

  2. Key 值问题：你使用了模板字符串作为 key，虽然这在 Vue 中通常可行，但在 uni-app 的 App 端，建议使用简单、唯一的字符串或数字作为 key。可以尝试直接使用 item 作为 key：

    <view v-for="item in test" :key="item">test1</view>

  3. 平台差异：uni-app 在 Web 端和 App 端的渲染机制存在差异。App 端使用的是原生渲染，可能对某些 Vue 特性的支持略有不同。可以尝试将 v-for 的父元素改为 <block> 标签，这是 uni-app 推荐的用于列表渲染的包装元素：

    <block v-for="item in test" :key="item">
  <view>test1</view>
</block>
回到顶部