Vue3 reactive获取接口数据重新赋值响应式丢失问题

最新推荐文章于 2023-10-10 12:19:47 发布
最新推荐文章于 2023-10-10 12:19:47 发布
阅读量481 收藏
点赞数
文章标签： vue.js 前端 javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CLONG_521/article/details/129140804
版权

单纯使用reactive实现响应式，axios获取数据后页面不刷新

方法一：将对象包裹在reactive中

方法二：使用ref替换reactive

还有一个问题也记录一下，svg直接import引用用不了，好像是我的svg中的path标签里面没有name这一项属性，所以我使用这种get请求svg来实现导入svg

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

刚学vue的小白，如有不对，欢迎指教

18岁天才上单
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
响应式微服务架构 reactive-microservices-architecture-orm
08-16
响应式微服务架构 reactive-microservices-architecture-orm
【无标题】vue-baidu-map 数据改变页面重新渲染
m0_59805184的博客
07-12 1195
vue-baidu-map页面应用
vue3使用vue-baidu-map-3x百度地图
weixin_45767637的博客
07-24 3050
vue3.0使用百度地图
vue-baidu-map-3x 使用记录
Lyrelion的博客
08-05 4041
为了解决上一个问题，采用了BmControl这些变量尽量比如 mapCenter 里，一开始就应该定义 lng、lat，后面具体的值可以是 0 state.mapCenter = { lng: 0, lat: 0}如果直接初始化成 state.mapCenter = {}，会导致发生不可预知的错误我最开始没初始化 单个点位 searchPoint 的对象结构时，没报错我最开始没初始化 点位信息弹窗 spInfoWindow 的对象结构时，就报错找不到 lng 属性了// 地图缩放级别。
vite使用vue-baidu-map-3x报错，Failed to resolve component: baidu-map If this is a native custom element,
最新发布
zjq_zfq的博客
10-10 459
vite引入百度地图，baidu_map组件解析失败
Vue3数组重新赋值问题
weixin_42202992的博客
09-15 2166
vue3中使用组合式式API时定义响应式数据需要使用reactive或者ref,两者使用时有些许不同,下面通过重新赋值数组来说明两者的不同
解决vue接口数据赋值给data没有反应的问题
10-18
今天小编就为大家分享一篇解决vue接口数据赋值给data没有反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
10-15
主要介绍了稍微学一下 Vue 的数据响应式（Vue2 及 Vue3），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3.0数据响应式原理详解
10-16
主要介绍了Vue3.0数据响应式原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue如何从接口请求数据
08-30
本篇文章主要介绍了vue如何从接口请求数据 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3异步请到后台数据时在渲染时页面不显示或者页面没有数据的问题
k490031的博客
03-28 4481
reactive()应该是响应式实时更新数据的但是打印有数据但是页面没有渲染，只有用push()方法添加到数据中。页面数据打印是有的证明接口已经获取了数据。现在页面已经渲染数据。
vue3接口数据赋值对象读不到
为了皮肤，争取早日到Lv4。
04-21 456
在使用Vue3对接接口的时候，直接将接口中的数据赋值给对象，发现读不到此属性代码如下。
vue3中绑定一个点击事件类型出现“{}”上不存在属性问题
qq_44866810的博客
02-05 2486
vue3中绑定一个点击事件类型出现“{}”上不存在属性问题
vue3+ts+vant调用接口时catch获取不到后台错误信息
qq_45919348的博客
12-31 2345
vue3+ts+vant调用接口时处理后台错误信息 在利用Notify组件进行消息提示时，错误信息的返回是在catch里执行的，当接口调用报错时，try执行不到调用接口后面的内容，所以此时Message不会被 赋值，但是错误信息已经 在catch的返回值时存在了，所以我们可以直接调用error.message, //#region 调用删除添加与编辑接口 const RulesApi = async (param: number, data: any) => { const
vue3的reactive重新赋值无效的问题
我的米饭
11-02 3212
关于 vue3 reactive 重新赋值的问题响应式代理
为何使用Vue从后端获取数据后一直赋值失败？-亲测
csyifanZhang的博客
03-23 3603
今天开始用mock.js和Vue前端进行交互了，然后获取到json数据之后赋值一直失败，困扰了自己好几个小时 clickHandler(e){ var that = this; this.$axios.get("/news") .then(res{ console.log(res.data); let data_ = JSON.str...
vue里获取不到data_vue data有值,但是页面{{}} 取不到值的解决
weixin_39630880的博客
12-19 7891
我的问题出在js引入的顺序不对，导致不能正常显示vue中的值正确的顺序应该是：先引入vue的js--------html代码-----最后引入自己写的js补充知识：vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题父子组件通信这个很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可 。例如：在父组件中data(){return {Data: ...
在vue3进行网络请求到的数据如何赋值？
weixin_41223530的博客
04-13 6478
定义数组数据时,需要在外面包一层,否则直接赋值,数据不是响应式的 setup() { let params = reactive({ pageNum: 1, pageSize: 3, }) // 定义数组数据时,需要在外面包一层,否则直接赋值,数据不是响应式的 const data = reactive({ list: [] }) test(params).then(res => { data.list
vue3 ref，reactive请求后的赋值问题以及解决方法
热门推荐
柒柒柒柒
06-14 1万+
vue3 ref，reactive请求后的赋值问题以及解决方法
vue3reactive整体重新赋值不响应
06-08
如果你使用Vue3的响应式API `reactive`，整体重新赋值是不会触发响应的。这是因为`reactive`只会在对象属性的访问和修改时才会触发更新，而不是在整个对象被重新赋值时。 如果你想要在整体重新赋值时触发响应，可以使用Vue3的`toRefs`函数将响应式对象转换为普通的对象，然后使用`watch`函数监听整个对象的变化，如下所示： ```javascript import { reactive, toRefs, watch } from 'vue' const state = reactive({ name: 'John', age: 30 }) // 转换为普通对象 const stateRefs = toRefs(state) // 监听整个对象的变化 watch(stateRefs, (newValue) => { console.log('state changed:', newValue) }) // 整体重新赋值 stateRefs.value = { name: 'Mary', age: 25 } ``` 这样，在整个对象被重新赋值时，watch函数就会被触发，并且传入的参数为新的对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值