在做第三方分享和第三方登录功能时，使用block标签进行v-for循环均失败，无法显示图标

现在做的uni-app还剩下最后一个页面就完成前端，但是前端的第三方分享和第三方登录功能均无法实现。第三方分享和第三方登录是自己做的并封装成组件，并在封装的组件里引入官方的API接口的数据和方法（providerList）。在自己封装的第三方组件里使用block标签进行v-for渲染均不能循环出图标（QQ登录，微信登录和微博登录的图标），如果将图标写死可以显示出来，但又无法调用分享接口和登录接口。

请问是代码有问题还是BUG，接下来又如何解决，使图标能显示出来又能调用分享接口和登录接口

在其他页面使用block和v-for可以渲染出类似图文列表和好友列表的形式是没有问题的。

下面是已经封装成组件的第三方登录按钮代码

<template>  
    <view class="otherLoginButton ui-df-aic">  
        <block v-for="(item,index) in providerList" :key="index">  
            <view class="ui-df-jcc ui-df-1" @tap="tologin(item)">  
                <view class="ui-df-jcc icon iconfont"  
                :class="['icon'+item.icon]"></view>  
            </view>  
        </block>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                providerList: []  
            }  
        },  
        onLoad() {  
            this.getLoginAuth();  
        },  
        methods: {  
            // 获取当前登录渠道  
            getLoginAuth(){  
                uni.getProvider({  
                    service: 'oauth',  
                    success: (result) => {  
                        this.providerList = result.provider.map((value) => {  
                            let providerName = '';  
                            let icon= '';  
                            switch (value) {  
                                case 'weixin':  
                                    providerName = '微信登录';  
                                    icon = 'weixin';  
                                    break;  
                                case 'qq':  
                                    providerName = 'QQ登录';  
                                    icon = 'QQ';  
                                    break;  
                                case 'sinaweibo':  
                                    providerName = '新浪微博登录';  
                                    icon = 'weibo';  
                                    break;  
                            }  
                            return {  
                                name: providerName,  
                                icon: icon,  
                                id: value  
                            }  
                        });  

                    },  
                    fail: (error) => {  
                        console.log('获取登录通道失败', error);  
                    }  
                });  
            },  
            // 登录方法  
            tologin(provider) {  
                uni.login({  
                    provider: provider.id,  
                    success: (res) => {  
                        console.log(JSON.stringify(res))  
                        console.log('login success:', res);  
                        // 更新保存在 store 中的登录状态  
                        console.log('登录成功，保存到本地存储，修改当前用户登录状态')  
                    },  
                    fail: (err) => {  
                        console.log('login fail:', err);  
                    }  
                });  
            }  
        }  
    }  
</script>  

<style scoped>  
    .otherLoginButton {  
        padding: 20upx 80upx;  
    }  
    .otherLoginButton>view>view {  
        width: 100upx;  
        height: 100upx;  
        border-radius: 100%;  
        font-size: 56upx;  
        color: #FFFFFF;  
    }  
    .otherLoginButton .icon-QQ {  
        background: #1296DB;  
    }  
    .otherLoginButton .icon-weixin {  
        background: #2AD198;  
    }  
    .otherLoginButton .icon-weibo {  
        background: #EE5E5E;  
    }  
</style>