刚接触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>