首页 前端知识 [Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘open‘)“

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘open‘)“

2024-05-03 18:05:22 前端知识 前端哥 170 952 我要收藏

目录

一、应用场景

二、报错解释

三、报错原因

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()获取
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6812.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!