vue3 click 返回 Proxy(Object) 对象无法使用和传递

刚接触vue3，准备自己动手撸下，一下就撸出问题了

页面循环图片并添加点击事件，点击图片的时候需要获取改元素的下标和详细信息，获取后传递给父组件

html

<img :src="getImageUrl(item.url)" alt="" :class="{ active: botInd == ind }"
        v-for="(item, ind) in imgList" :key="ind" @click="clickBtn(item, ind)" />

script

<script setup>
	import { reactive } from 'vue';
	const imgList =  reactive([{
	  url: 'zhsj_0708.png',
	  title:'视频监控',
	  name:'',
	   ...
	}])
	
	const clickBtn = (val, ind) => {
	  console.log(val,ind)
	}
</script>

点击后获取到的值

理想数据应该是这样

解决办法：
第一步：引入 toRaw() ，因为toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象
第二步：直接使用 toRaw()，其中 val 是响应类型数据，data为普通类型数据

const data= toRaw(val)

贴上修改后的代码

<script setup>
	import { reactive,toRaw } from 'vue';
	const imgList =  reactive([{
	  url: 'zhsj_0708.png',
	  title:'视频监控',
	  name:'',
	   ...
	}])
	
	const clickBtn = (val, ind) => {
		const data= toRaw(val)
		console.log(data) // 返回的就是想要的格式了
	}
</script>