xiaoz001
xiaoz001
  • 发布:2019-11-23 14:35
  • 更新:2022-09-05 14:35
  • 阅读:6966

#插件讨论# 【 Popup 弹出层 - DCloud 】使用出错TypeError: Cannot read property 'open' of undefined

分类:uni-app

按照demo里面引入了组件和方法,但是onclick触发函数的时候出现报错:

TypeError: Cannot read property 'open' of undefined

HTML为

<button type="primary" @click="register">立即注册</button>

js为:

<script>  
    //导入弹出层插件  
    import uniPopup from '@/components/uni-popup/uni-popup.vue'  

    export default {  
        components: {  
            uniPopup  
        },  
        data() {  
            return {  

            }  
        },  
        methods: {  
            register:function(){  
                var data = Array();  
                //获取用户名  
                data['username'] = this.username;  
                //获取密码  
                data['password1'] = this.password1;  
                data['password2'] = this.password2;  
                //如果两次密码不一致  
                if( data['password1'] != data['password2'] ){  
                    this.togglePopup('center','popup')  
                }  
            },  
            togglePopup(type, open) {  
                console.log(open);  

                switch (type) {  
                    case 'top':  
                        this.content = 'dfdsf'  
                        break  

                    case 'bottom':  
                        this.content = 'dfsf'  
                        break  
                    case 'center':  
                        this.content = 'fdsfd'  
                        break  
                }  
                this.type = type  
                this.$refs[open].open()  
            }  
        }  
    }  
</script>
2019-11-23 14:35 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com

uniapp这个popup的弹出层,需要在button下面加一个uniapp的弹出框

<view>  
            <!-- 联系我们 -->  
            <button class="connetUs" @click="toggle('center')"><text class="button-text">联系我们</text></button>  
            <view>  
                <uni-popup ref="popup" background-color="#fff" @change="change">  
                    <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">  
                        <image src="../../../static/sucai/QR.jpg"></image>  
                    </view>  
                </uni-popup>  
            </view>  
        </view>
methods: {  
            change(e) {  
                console.log('当前模式:' + e.type + ',状态:' + e.show);  
            },  
            toggle(type) {  
                console.log('弹出QR');  
                this.type = type  
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性  
                this.$refs.popup.open(type)  
            }  
  }  

出现TypeError: Cannot read property 'open' of undefined 可能师妹添加button按钮下面的弹出框

辉哥不可以
d***@163.com

d***@163.com

最近我也发生了,在微信小程序里没问题,在h5有问题。在官方给的demo没问题,用到自己项目有问题

tomy_li

tomy_li

同问题。我最后发现是因为组件的挂载时机问题。比如我的代码里组件有v-if判断,就会导致调用open的时候组件尚未初始化,去掉判断就ok了<uni-popup ref="popup" type="center" v-if="isShowPainter" :animation="false" @change="popupChange">

3***@qq.com

3***@qq.com - 开发者

放到 onReady 里面。

  • y***@163.com

    感谢老板,真的解决了

    2021-11-30 10:52

小白拜拜

小白拜拜

我加了一个延迟出来了,其他的方法都试了,还是报undefined。

1***@qq.com

1***@qq.com - 666

这个如果是放在组件里,可以尝试这样做:
1、延迟一下显示
2、如果有 v-if 判断,先v-if

let self = this  
this.pickerShow = true  
// 延迟一下,否则第二次打开报 open is not function  
setTimeout(function() {  
    self.$refs.popup.open('top')  
}, 100);

要回复问题请先登录注册