Vue3中使用axios更新对象值改变但是页面v-text不更新 || 不怎么正经的解法

最新推荐文章于 2024-06-05 01:38:52 发布
最新推荐文章于 2024-06-05 01:38:52 发布
阅读量610 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Penguins_0/article/details/129271223
版权
代码如下：

script代码
template代码
使用axios调用接口之后页面显示的user信息还是初始化的内容，axios内部更新之后的值没有更新到页面中
页面

查了很久都找不到能解决的方法（初学小垃圾没办法）

强制更新、生命周期都试了就是不行
只知道是vue监听不到reactive对象变了所以没有更新
而且vue能监听到const变量的变化

因此尝试中得到了一个很离谱但有用的方法

定义一个块使用v-if
在这里插入图片描述
定义一个变量
在这里插入图片描述
然后在axios中更新show的值就可以让vue监听到然后更新数据
在这里插入图片描述
页面内容更新了
在这里插入图片描述

Penguins_0
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue修改数据页面不重新渲染问题(Vue中数组和对象更改后视图不刷新)
killbee365的博客
07-28 1万+
vue渲染机制和如何解决数据修改页面不刷新问题的多种方法 首先 第一点，vue底层是 将data对象传人，使用Object.definePropety,转换为getter和setter，所以，vue不支持IE8. 1.简单介绍一下Object.definePropety, Object.defineProperty(obj, prop, descriptor) //参数 obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符 var
在vue中通过axios异步使用echarts的方法
08-28
在 Vue 中通过 Axios 异步使用 Echarts 的方法 本篇文章主要介绍了在 Vue 中通过 Axios 异步使用 Echarts 的方法。在实际的工作中，数据不可能是像之前的 demo 演示的那样把数据写死的。所有的数据都应该通过发送...
关于Vue中的axios数据异步 获取后，更改数据，页面没有更新
smalCat的博客
12-27 1万+
更改axios数据后，页面没有更新解决办法列子解决 列子 //页面视图HTML <span>{{test[0].ress}}</span> // 数据请求 this.axios.get('/list/1').then(res => { // 得到数据 this.test = res.data.data // 对数据批量更改 ...
【vue3|第6期】如何正确地更新和替换响应式对象reactive
最新发布
Commas的博客
06-05 1476
在Vue3中，响应式系统是通过reactive函数创建的，它返回一个响应式代理对象。这个代理对象封装了原始对象，并提供了拦截器来处理对原始对象的访问和修改。然而，当涉及到更新或替换响应式对象时，开发者需要特别注意，因为不当的操作可能会导致响应式丢失。在Vue3中，更新响应式对象时，开发者应该避免直接重新赋值。相反，应该使用或展开运算符来合并或替换对象的属性。这样可以确保响应式系统能够正确地跟踪数据的变化，并在视图中进行相应的更新。希望本文能帮助你更好地理解Vue3中响应式对象的更新和替换。
vue3中定义的对象再次赋值，页面不会自动更新解决方法
王延朕的博客
04-11 1万+
第一种方法：将reactive换成ref，即可实现页面随时刷新： export default { components:{HelloWorld}, name: 'App', setup(){ let person=ref({}) const getPerson= (data)=>{ person.value=data } return { getPerson, person } } } 第二种方法：在定义r
vue中给对象添加新属性页面不更新怎么办
前端小白的博客
08-19 491
如果目标对象和源对象有相同的属性名，后面的源对象的属性值会覆盖前面的。原因是一开始obj的foo属性被设成了响应式数据，而bar是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据。定义一个p标签，通过v-for指令进行遍历，然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行。通过Vue.set向响应式对象中添加一个property，并确保这个新 property 同样是响应式的，且触发视图更新。
vue.js axios 数据不刷新
Meepo
12-05 657
vue.js axios 数据不刷新
解决在Vue中使用axios POST请求变成OPTIONS的问题
10-14
在Vue.js应用中，当你使用axios库进行POST请求时，有时会发现浏览器实际上发送了一个OPTIONS请求，而不是预期的POST请求。这种现象通常是由于浏览器的CORS（Cross-Origin Resource Sharing，跨源资源共享）策略引起...
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的文件时。本篇文章将详细解析这一过程，并提供相关代码实例。 首先，我们来...
vue+vuex+axios实现登录、注册页权限拦截
08-27
在login.vue中，我们使用了Element UI的Form组件来创建登录表单。我们使用了自动完成和表单验证来确保用户输入的数据是正确的。 ```html <div class="login-container"> <el-form autoComplete="on" :model=...
VUE项目axios请求头更改Content-Type操作
11-20
总的来说，这个Vue项目展示了如何使用Axios进行API通信，如何设置请求头以改变`Content-Type`，以及如何处理和存储`Authorization`头中的JWT`token`。这为构建安全、健壮的前后端交互奠定了基础。
vue中改变数据，数据不刷新
qq_42981715的博客
03-18 1187
vue中改变数据，数据不刷新 最近在开发中遇到了这样一些情况，通过点击事件改变了对象里面得数据，但是页面却不刷新，后来发现，是在给对象添加属性时出现的问题。 当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 当页面初始化时候，vue会遍历data对象所有的属性，并使用object.defineProperty把这些属性全部转化为getter/setter，所以属性必须在 data 对象上存在才能让 Vue 转换它，这
vue3数据更新页面不更新
m0_70542915的博客
03-14 3831
笔记
Vue某些情况下 v-model绑定数据不实时更新解决办法
热门推荐
weixin_42213951的博客
10-26 3万+
有的时候我们变化data内的内容，console.log打印的时候是显示已经变化了的，但并没有渲染到界面上去。因为vue在渲染的时候对于数组对象里面的的变化是不能及时渲染到的（这是我个人浅薄的理解），受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它...
axios接收后端传递的数据页面不显示问题
weixin_48624193的博客
06-15 1757
Vue中使用axios接收控制层的数据控制台报错页面不显示问题
Vue数据更新，页面却没有更新的几种情况及解决方法
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
使用python matplotlib实现动图绘制
ai-exception的博客
06-13 8161
前言 想写数据动态可视化很久了，但是网上竟然没有一份能直接用的代码，昨天终于狠下心来死啃了一波开发者文档搞定了这部分，贴一篇blog记录一下希望可以帮到你。 思路 动图的核心函数是matplotlib.animation.FuncAnimation，基本用法： anim = animation.funcanimation(fig, animate, init_func=init, ...
vue3数据更新了，视图不更新
weixin_43933139的博客
12-01 4600
最近很多同学遇到数据更新了视图不更新的问题 、接下来我们就一起去分析一下原因，不保证100%能解决你的问题，但也一定能让你有所收获。
vue3里使用改变了一个reactive定义的数组。页面显示的地方并没有改变
肖肖肖丽珠的博客
03-28 990
系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。使用直接赋值的方式给voiceMoodList但是发现页面并没有改变。并且监听voiceMoodList的地方也没有触发。解决办法可以是我们把这个reactive的替换成ref。
用vue2写一个完整的登录页面 路由中并验证token过期没过期 需不需要重新登陆
04-05
现在，我们已经完成了一个基本的登录页面，并且使用Vue Router和Axios进行了Token验证。用户在登录成功后，我们会将Token保存到localStorage中，并且在后续的请求中带上Token进行验证。如果Token过期或者用户未登录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值