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

目录

一、应用场景

二、报错解释

三、报错原因

1、 以下是实际应用代码：

 2、 原因

​四、解决办法

---

一、应用场景

      在做uni-app的过程中有使用到uni-popup弹出层组件。（以下取自uni-app官网手册——扩展组件）：

二、报错解释

     使用该代码时，报[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'open')"的错误，表示“找不到open这个元素，无法解析这串代码”。

this.$refs.popup.open('top')

三、报错原因

   1、 以下是实际应用代码：

			
				
					

						
color：{{item.color}}
					点击
				
           底部弹出 Popup
			
				

  运行结果报错：

 

 2、 原因

      标签放在了被遍历实行的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()获取