#插件讨论# 【 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 个回复

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

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

tomy_li

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

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

放到 onReady 里面。

y***@163.com

感谢老板，真的解决了

2021-11-30 10:52
3***@qq.com

还真是，万分感谢

2023-03-05 11:31

小白拜拜

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

1***@qq.com - chenghui

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

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

s***@sophiew.top

我知道了，呜呜呜呜呜呜呜，我真的哭死，把开发者工具停止，在重新运行一下就行了

1***@qq.com

感谢，调了2小时，重启下好了真坑

2023-04-18 18:11

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

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

8 个回复

公告

相关问题

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

与内容相关的链接

8 个回复

公告

相关问题