uni-app开发微信小程序 使用vue3版本 循环嵌套动态渲染成table数据异常

uni-app开发微信小程序 使用vue3版本 循环嵌套动态渲染成table数据异常

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

PC开发环境操作系统：Mac

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

HBuilderX类型：正式

HBuilderX版本号：3.3.6

第三方开发者工具版本号：1.05.2111300

基础库版本号：2.21.2

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
<view v-for="(row, rowIndex) in data" :key="rowIndex">  
    <view v-for="(column, columnIndex) in columns" :key="columnIndex">  
     {{row[column]}}  
    </view>  
</view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
           data: [{  
            name: '123',  
            name1: '222'  
        },{  
            name: '123',  
            name1: '222'  
        }],  
        columns: ['name', 'name1']  
        }  
    }  
}  
</script>

操作步骤：

直接把上面代码复制成组件就行

预期结果：

理论上应该可以正常渲染的

实际结果：

提示row未定义，即 row[column]未正确解析

ReferenceError: row is not defined  
    at xx-table.js? [sm]:252  
    at vFor (vendor.js? [sm]:4705)  
    at Object.f (vendor.js? [sm]:4743)  
    at Proxy._sfc_render (xx-table.js? [sm]:250)  
    at renderComponentRoot (vendor.js? [sm]:4338)  
    at ReactiveEffect.componentUpdateFn [as fn] (vendor.js? [sm]:4392)  
    at ReactiveEffect.run (vendor.js? [sm]:1161)  
    at setupRenderEffect (vendor.js? [sm]:4416)  
    at mountComponent (vendor.js? [sm]:4312)  
    at createComponent3 (vendor.js? [sm]:4445)(env: macOS,mp,1.05.2111300; lib: 2.21.2)

bug描述：

写一个小程序的table组件发现无法动态渲染表格数据，因为使用了先循环表格数据，再循环列名，根据列名顺序动态渲染表格数据，vue2版本是可以渲染的，但是vue3版本却不行，直接报错了

报错信息


更多关于uni-app开发微信小程序 使用vue3版本 循环嵌套动态渲染成table数据异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

还能这么加载?

更多关于uni-app开发微信小程序 使用vue3版本 循环嵌套动态渲染成table数据异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uniapp vue2版本是可以的

我也遇到这种问题了，主要是微信端。电脑环境：windows，编译器环境：3.3.11，

在uni-app的Vue3版本中，循环嵌套动态渲染确实存在一些与Vue2不同的行为。根据你的代码和报错信息，问题主要出在Vue3的编译机制上。

问题分析：

  1. Vue3编译差异：Vue3的模板编译器在处理嵌套循环时，对作用域的解析比Vue2更严格
  2. 小程序环境限制：微信小程序平台对动态属性访问的支持有限

解决方案：

方案1：使用计算属性预处理数据

<template>
<view v-for="(row, rowIndex) in processedData" :key="rowIndex">
    <view v-for="(item, columnIndex) in row" :key="columnIndex">
        {{item}}
    </view>
</view>
</template>

<script setup>
import { computed } from 'vue'

const data = [{ name: '123', name1: '222' }, { name: '123', name1: '222' }]
const columns = ['name', 'name1']

const processedData = computed(() => {
    return data.map(row => {
        return columns.map(col => row[col])
    })
})
</script>

方案2：使用函数方法

<template>
<view v-for="(row, rowIndex) in data" :key="rowIndex">
    <view v-for="(column, columnIndex) in columns" :key="columnIndex">
        {{getCellValue(row, column)}}
    </view>
</view>
</template>

<script setup>
const data = [{ name: '123', name1: '222' }, { name: '123', name1: '222' }]
const columns = ['name', 'name1']

const getCellValue = (row, column) => {
    return row[column]
}
</script>

方案3：调整数据结构（推荐）

<template>
<view v-for="(row, rowIndex) in tableData" :key="rowIndex">
    <view v-for="(cell, cellIndex) in row.cells" :key="cellIndex">
        {{cell}}
    </view>
</view>
</template>

<script setup>
const tableData = [
    { cells: ['123', '222'] },
    { cells: ['123', '222'] }
]
</script>
回到顶部