Nuxt3中如何将Proxy对象转为普通JS对象以使用find方法？

以下是针对你遇到的问题的可行解决办法：

1. 先提取目标数组再赋值给ref #

不要将整个Strapi返回的page对象直接赋值给ref，而是先提取其中的播客数组，再创建响应式变量：

// 假设Strapi返回的page.data是播客数据数组
const podcasts = ref(page.data)
// 后续直接调用find方法
const targetPodcast = podcasts.value.find(item => item.id === route.params.id)

注：如果存在类型不匹配问题（比如URL中的id是字符串，Strapi返回的id是数字），记得做类型转换：

const targetPodcast = podcasts.value.find(item => item.id === Number(route.params.id))

2. 使用toRaw获取原始数据后调用find #

如果已经将数据赋值给ref并生成了Proxy，可通过Vue的toRaw方法获取原始数据，再执行find操作：

import { toRaw } from 'vue'

// 假设podcasts是包含数组的响应式Proxy对象
const rawData = toRaw(podcasts.value).data // 提取原始数组
const targetPodcast = rawData.find(item => item.id === route.params.id)

3. 手动遍历匹配替代find方法 #

若以上方法仍有问题，可通过手动遍历数组找到目标项：

import { toRaw } from 'vue'

let targetPodcast = null
const rawPodcasts = toRaw(podcasts.value).data
for (const item of rawPodcasts) {
  if (item.id === route.params.id) {
    targetPodcast = item
    break
  }
}

4. 在数据获取阶段预处理数组 #

在useAsyncData或数据请求阶段直接将数组转为普通数组，再赋值给ref：

const { data: page } = await useAsyncData('podcasts', () => {
  // 此处替换为你的Strapi数据请求逻辑
  return $fetch('/api/podcasts')
})
// 用扩展运算符将数组转为普通数组后创建响应式变量
const podcasts = ref([...page.value.data])

内容的提问来源于stack exchange，提问作者Maxxx