1***@qq.com
1***@qq.com
  • 发布:2019-04-10 14:47
  • 更新:2019-04-25 15:28
  • 阅读:1444

页面中使用了折叠面板这个组件,在小程序开发工具中无法正常显示内容

分类:HBuilderX
<template>  
    <scroll-view class="uni-flex-column content" scroll-y="true">  
        <uni-collapse accordion="true">  
            <block v-for="(item1,index1) in folderData" :key="item1.id">  
                <uni-collapse-item :title="item1.storeName" :rightText="item1.rightText">  
                    <!-- <list1 :listData="item1.childList"></list1> -->  
                    <block v-for="item in item1.childList" :key="item.id">  
                        <view class="uni-flex item">  
                            <view class="item-left">  
                                <image :src="item.icon" mode="aspectFit"></image>  
                            </view>  
                            <view class="uni-flex-column item-center">  
                                <view class="store-name">{{item.text}}</view>  
                                <view class="uni-flex message">  
                                    <text>联系人:{{item.name}}</text>  
                                    <text class="phone-number" @tap="callPhone(item.phone)"> ({{item.phone}})</text>  
                                </view>  
                                <view class="address">{{item.address}}</view>  
                            </view>  
                            <view class="item-right">查看{{item.count}}次</view>  
                        </view>  
                    </block>  
                </uni-collapse-item>  
            </block>  
        </uni-collapse>  
    </scroll-view>  
</template>  

<script>  
    import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'  
    import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'  
    export default {  
        components: {  
            uniCollapse,  
            uniCollapseItem  
        },  
        data() {  
            return {  
                folderData: [{  
                    id: '0',  
                    storeName: '深圳',  
                    rightText: 100,  
                    childList: [{  
                            id: '00',  
                            icon: '../../static/d.jpg',  
                            text: 'dddd',  
                            phone: '13100000000',  
                            name: '张三',  
                            address: '深圳',  
                            count: 2  
                        },  
                        {  
                            id: '01',  
                            icon: '../../static/d.jpg',  
                            text: 'dd',  
                            phone: '13100000001',  
                            name: '李四',  
                            address: '深圳',  
                            count: 1  
                        }  
                    ]  
                }, {  
                    id: '1',  
                    storeName: '深圳',  
                    rightText: 10,  
                    childList: [{  
                            id: '10',  
                            icon: '../../static/d.jpg',  
                            text: '古古怪怪给',  
                            phone: '13100000010',  
                            name: '张三',  
                            address: '顶顶顶顶',  
                            count: 2  
                        },  
                        {  
                            id: '11',  
                            icon: '../../static/d.jpg',  
                            text: '嘻嘻嘻嘻嘻嘻嘻',  
                            phone: '13100000011',  
                            name: '李四',  
                            address: '哎哎哎啊',  
                            count: 1  
                        }  
                    ]  
                }]  
            }  
        },  
        onLoad() {},  
        computed: {  

        },  
        methods: {  
            change(e) {  
                console.log(e)  
            },  
            callPhone(phoneNumber) {  
                uni.makePhoneCall({  
                    phoneNumber: phoneNumber,  
                    complete(e) {  
                        uni.showModal({  
                            content: 'test'  
                        })  
                    }  
                })  
            }  
        }  
    }  
</script>  

<style>  

</style>  
2019-04-10 14:47 负责人:无 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

如果需要在组件上使用 v-for 循环,需要使用 hbuilderX.alpha 1.8.5+ 版本

  • 1***@qq.com (作者)

    这个不是v-for循环的问题吧,如果把第二个v-for循环中的listData改为data属性下的一个值,就能正常显示,如果第二个v-for的数据是从外层v-for中动态得到的,就不能正常显示,不太明白

    2019-04-10 15:21

1***@qq.com

1***@qq.com (作者)

微信没报错,所以不知道原因,谷歌控制台报错如下:
Property or method "listData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

7***@qq.com

7***@qq.com

问题解决了么?

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