解决 vue3 中 Proxy(Object) 对象无法直接读取或使用

第一步：引入 toRaw 方法，toRaw 可以将响应类型数据转化为普通类型数据，具体使用方法是：toRaw(obj)
<template></template>
<script setup>
import { ref, reactive, toRaw, onMounted } from "vue";
const demolist = reactive({
list: [
{
title: "一般",
name: "home",
value: "0",
},
{
title: "还好",
name: "category",
value: "0",
},
{
title: "很好",
name: "find",
value: "0",
},
{
title: "最爱",
name: "cart",
value: "0",
},
{
title: "改进",
name: "my",
value: "0",
},
],
});
onMounted(() => {
console.log(demolist, "demolist");
console.log(toRaw(demolist));
});
</script>
<style>
</style>
第二步：使用序列化也可以 (JSON.parse(JSON.stringify()))
<template></template>
<script setup>
import { ref, reactive, toRaw, onMounted } from "vue";
const demolist = reactive({
list: [
{
title: "一般",
name: "home",
value: "0",
},
{
title: "还好",
name: "category",
value: "0",
},
{
title: "很好",
name: "find",
value: "0",
},
{
title: "最爱",
name: "cart",
value: "0",
},
{
title: "改进",
name: "my",
value: "0",
},
],
});
onMounted(() => {
console.log(demolist, "demolist");
console.log(JSON.parse(JSON.stringify(demolist)));
});
</script>
<style>
</style>
AI写代码

 

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_42753983/article/details/143517881