目录
一、应用场景
二、报错解释
三、报错原因
1、 以下是实际应用代码：
2、 原因
四、解决办法
一、应用场景
在做uni-app的过程中有使用到uni-popup弹出层组件。（以下取自uni-app官网手册——扩展组件）：
<template>
<view>
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
</view>
</template>
<script>
export default {
methods:{
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')
}
}
}
</script>二、报错解释
使用该代码时，报[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'open')"的错误，表示“找不到open这个元素，无法解析这串代码”。
this.$refs.popup.open('top')三、报错原因
1、 以下是实际应用代码：
<view class="ist">
<uni-card v-for="(item,index) in list" :key="index" :title="item.code" :thumbnail="img">
<view class="">
<ul @click="onClickToExamin(item)">
<li>color：{{item.color}}</li>
<button @click="stop">点击</button>
</view>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
</uni-card>
</view>运行结果报错：
2、 原因
<uni-popup></uni-popup>标签放在了被遍历实行的uni-card组件当中，因此，uni-popup组件也被遍历执行了N次，所以用this.$refs.popup来获取uni-popup组件的open方法就不合适了。应该用this.$refs.popup[下标值]来获取。
可以通过打印this.$refs.popup直观地感受一下：
四、解决办法
1、 把uni-popup组件放在遍历组件外，再用this.$refs.popup.open();
2、放在遍历组件中，通过加下标this.$refs.popup[0].open()获取
