惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 司徒正美
Jina AI
Jina AI
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 三生石上(FineUI控件)
宝玉的分享
宝玉的分享
MyScale Blog
MyScale Blog
I
InfoQ
爱范儿
爱范儿
Microsoft Security Blog
Microsoft Security Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Stack Overflow Blog
Stack Overflow Blog
T
Tailwind CSS Blog
D
DataBreaches.Net
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
The Blog of Author Tim Ferriss
B
Blog
阮一峰的网络日志
阮一峰的网络日志
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
月光博客
月光博客
雷峰网
雷峰网
Recent Announcements
Recent Announcements
量子位
B
Blog RSS Feed

博客园 - 疯子110

Vue3 + Vite + Ts 报错:Property ‘ ‘ does not exist on type ‘never‘ activiti部署流程后act_re_procdef表中无流程定义信息 【转】openEuler欧拉系统重置密码 【转】nginx开启https导致springboot无法获取正确浏览器请求地址问题 【转】SLF4J(W): No SLF4J providers were found. 解决方法 vue项目放在springboot项目里后,刷新页面会显示whitelabel error page Vue3 echarts tooltip添加点击事件(最简版) Vue3富文本编辑器wangEditor 5使用总结【转载】 centos7-分区2T以上大硬盘[转】 关于mybatis进行sql查询字段值为null而不显示问题解决办法 Vue3 - 项目中使用 debugger 在 chrome 谷歌浏览器中失效 vue项目error Unexpected ‘debugger‘ statement no-debugger报错 vue项目中 报错 error ‘xxx‘ is assigned a value but never used 在vue中使用leaflet加载地图【转载】 无法加载文件 D:\Program Files\xxxxx\vue.ps1,因为在此系统上禁止运行脚本”的解决方法 - 疯子110 Vue3安装配置+VSCode开发环境搭建,超详细保姆级教程(图文) 【转】将postgresql表名和字段名统一转换为小写 【cesium重新梳理】1.cesium知识整理 【cesium】修改底图颜色为蓝色科技范儿
解决 vue3 中 Proxy(Object) 对象无法直接读取或使用
疯子110 · 2025-04-27 · via 博客园 - 疯子110

第一步:引入 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