b***@gmail.com
b***@gmail.com
  • 发布:2022-03-02 15:45
  • 更新:2022-03-02 16:28
  • 阅读:391

【报Bug】特定情况下, v-for 在微信小程序中不渲染

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window 10 专业版 64

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

第三方开发者工具版本号: 1.05.2201240

基础库版本号: 2.22.1

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  

        <view class="text-area" v-if="item.id">  
            <text class="title">{{item.title}}</text>  
        </view>  

        <view v-if="item.id">  
            列表: {{list.length > 0 ? list.length : ''}}  
            <view v-for="(item,index) in list" :key="index">  
                <view class="item">  
                    {{item.name}} - {{item.version}} - {{getDispaly(item.version)}}  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                item: {  
                    id: '11',  
                    title: 'Hello'  
                },  
                list: [{  
                    id: 1,  
                    name: 'uniApp',  
                    version: '2.0.0',  
                }, {  
                    id: 2,  
                    name: 'vue',  
                    version: '3.0.4'  
                }]  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            getDispaly(version) {  
                return `V${version}`  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  

操作步骤:

新建page, 复制 代码示例, 小程序中查看改页面

预期结果:

v-for 能正常渲染

实际结果:

v-for 没有正常渲染

bug描述:

v-for 在小程序无法渲染

2022-03-02 15:45 负责人:无 分享
已邀请:
[已删除]

[已删除]

v-for的item和data的不要重复命名试试

  • b***@gmail.com (作者)

    项目中已经这样处理了, 可以解决这个问题

    这里只是提一个bug

    2022-03-02 17:06

该问题目前已经被锁定, 无法添加新回复