vue接口返回数据页面没有重新渲染

最新推荐文章于 2024-07-31 15:22:51 发布
最新推荐文章于 2024-07-31 15:22:51 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： vue web js 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxhmm921/article/details/121956934
版权
web 同时被 3 个专栏收录
92 篇文章 0 订阅
订阅专栏
js
57 篇文章 0 订阅
订阅专栏
vue
36 篇文章 0 订阅
订阅专栏
本文探讨了在Vue.js应用中遇到的数据更新后页面未重新渲染的问题，主要集中在`this.$set`和`Object.assign`两种常见解决方法上。尽管`this.$set`能成功更新输入框的值，但对文件上传组件无效；而`Object.assign`也无法实现文件显示。最后提出了使用临时变量结合`v-if`进行页面重新渲染的策略，确保了整个页面的正确更新。
摘要由CSDN通过智能技术生成

在这里插入图片描述
页面初始值models为空对象，接口返回赋值后，页面没有重新渲染
解决两种方式：
一：this.$set(obj, key, value)
在这里插入图片描述

this.$set(this.models,item.propcode,item.propvalue)

这种方法试了下，输入框的值回显了，但是上传的文件没有
二：Object.assign(target, sources)
在这里插入图片描述

this.models=Object.assign({}, this.models)

这种的上传文件也是不显示
三：还是用的老方法，声明一个变量，接口返回值的时候v-if渲染一下页面
在这里插入图片描述

在这里插入图片描述

mySunshine921
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 详细实现先调用接口，然后再渲染数据，让页面 DOM 元素模板等待接口请求数据完毕后再进行渲染页面（先加载完所有数据再渲染页面）
王佳斌
01-13 1万+
效果图 文章末尾有代码示例及思路。 前言 如果你的数据是本地（data 直接定义），那么并不会发生任何问题，因为它们是同步的。 <template> <ul v-for="(item, index) in getData()" :key="index"> <li>{{ item.name }}</li> </ul> </template> getData() { api data ... } 由于模板（templat
vue修改数据页面不重新渲染
m0_64969829的博客
02-17 1067
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染 三、解决方案 Vue 不允许在已经创建的实例上动态添加新的响应式属性 若想实现数据与视图同步更新，可采取下面三种解决方案： 1.Vue.set() Vue.set( target, propertyName/index, value ) 参数： target：要修改的对象或数组 propertyName/index：属性或下标 value：修改后的value值 this.$set(this.item, "newProperty", "新值");
vue 接口数据返回之后再渲染页面_vue首页异步请求后数据不渲染
weixin_39714763的博客
12-22 4076
自己遇到的问题记录一下，做一个企业微信鉴权登录，首页获取用户信息存session方便后续页面调用。在App.vue中写了鉴权，调用接口拿到了返回的用户信息，并且存在了session中。但是在首页home.vue中拿取不到session数据。后来查了半天，请教了几个vue同行知道问题出在了哪里。由于是异步请求，而app和home在请求还未完成时就已经加载完毕了，导致从session中拿取不到数据。知...
解决：Vue3使用reactive定义数据，请求接口赋值后，页面不会回显值
最新发布
m0_53789333的博客
07-31 447
解决：Vue3使用reactive定义数据，请求接口赋值后，页面不会回显值
vue 接口调用返回的数据未渲染问题
用针戳左手中指指头的博客
02-25 3421
如果在实例创建之后添加新的属性到实例上，他不会触发视图更新。 官方说明： https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96 下面这段是官方的一段 当你把一个普通的 JavaScript 对象传入 Vue 实例作为d...
vue 多个回调_2020年最新互联网程序员面试系列 VUE，初学者福音
weixin_29669143的博客
11-28 232
MVVM模式的理解MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。ViewModel 通过双向数据绑定把...
vue3.0项目中，成功获取后端数据，却发现渲染失败，页面还是没数据？
coder184的博客
02-11 1508
因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。解决的办法：赋予响应性即可，使用ref()或者reactive()。渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。
vue修改数据后页面不重新渲染
菜鸡的博客
06-27 2517
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染。
使用Vue调取接口,并渲染数据的示例代码
10-16
在控制器中，首先验证传入的请求参数中的密钥是否正确，若密钥不正确则返回失败信息，若正确则调用模型层方法获取数据，并以JSON格式返回数据。 在这篇文章中，还提到了post方法的使用，但是具体代码实现并没有详细...
Vue在页面数据渲染完成之后的调用方法
10-18
在Vue.js开发中，有时我们需要确保页面数据完全渲染完成后执行某些操作，比如计算元素高度、初始化第三方库等。Vue提供了一种机制来处理这种情况，即`$nextTick`方法和`watch`对象。下面我们将详细讲解这两个关键...
vue 后端数据成功返回 页面不渲染_vue能获取到数据数据却渲染不到页面上,为什么？...
weixin_39731586的博客
12-22 9035
问题描述从后台可以拿到数据，并打印在控制台但是就是渲染不到页面，我也不知道是为什么，感觉都正常问题出现的环境背景及自己尝试过哪些方法尝试用let _this = this来代替this但是还是没用并且报出success是undefined的相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)ref="singleTable":data="tableData"style="width: 100...
vue 后端数据成功返回 页面不渲染_vue中无法在页面渲染前修改一个后台返回的数据...
weixin_35990295的博客
12-31 1005
项目中有个列表，该列表包含了一个用户的ID,现在由于某个曹丹的原因后台无法同时在这个接口中提供该用户的姓名，只是提供了一个查询用户信息的接口，data(){return{page:1,formData:{},tableData:[]}},created(){let _this = thisthis.getList(this.page,this.formData).then(res=>{res...
vue3 使用reactive定义变量时，会出现数据变化，页面未更新渲染
fengGer的博客
03-23 2046
vue3 使用reactive定义变量时，会出现数据变化，页面。他喵的，竟然发现，最后两种方案处理以上问题。将reactive更改为ref，问题就迎刃而解！
vue router路由参数变化，路由地址没变化 ，页面不重新渲染，刷新问题
weixin_46211267的博客
11-12 7734
路由参数变化，地址没变化 ，页面不重新渲染，刷新问题 原因： 该路由对应的组件在 路由地址没有改变，会复用该组件，不会再重新创建该组件实例，所以对应的写在生命周期钩子函数中的异步请求代码就不会执行，页面也不会重新渲染， 解决方法： 方法一： 给对应的router-view 动态添加key属性，这样就不会出现路由参数变化页面复用的情况，代码如下: #router-view 代码 <router-view ：key="key"></router-view> #组件动态key属性 的值
后端正常返回了数据，但是页面渲染不出来的bug
qq_44102500的博客
01-17 3625
后端正常返回了数据，但是页面渲染不出来的bug 项目背景：在接受后端返回的值时，返回的对象中的一属性为空，但页面中绑定了该属性，操作了它，越界取值，如：html中代码为 v-model = form.list[0].name, 但后端返回的该属性为空,即res.data.data.list = null, 此时页面读取了改属性，越界取值，页面渲染不出数据。 当时也是排查了好久也找不到解决办法，后来去问的大佬同事，一语道破，也是自己的基础知识不够扎实吧，解决办法很简单，就是在获取后端数据时加一层对改属性的判
Vue项目引进ElementUI组件
chenxi004的博客
10-20 335
一、创建一个基于 webpack 模板的新项目 1、安装淘宝镜像 npm使用的国外中央仓库，下载速度较慢，有的时候还会有部分文件被墙掉。 npm install -g cnpm --registry=https://registry.npm.taobao.org 2、安装全局 vue-cli cnpm install --global vue-cli 3、安装 webpack cnpm ins...
【记录】有关接口响应很快，但是在页面渲染的时候发现很慢的问题
九七的博客
11-26 377
存在gzip就表示成功开启了。
vue修改数据后，页面不重新进行渲染的问题（当点击其他页面元素会重新渲染数据）
jxysgzs的博客
06-22 3463
问题 最近开发项目时，遇到一个非常特殊的问题（以前也遇到过但都用很多乱七八糟的方式解决了！），这个问题就是当我在methods的某一个方法中修改了页面v-for的数据时，本应该重新渲染的页面没有响应，还是维持老样子，当我点击页面上的其他组件时，页面才重新渲染出来。 给大家看一下就是下面这个效果。 下面这两个，是点击其他组件时又成功渲染出来的样子。 原因 这里说一个概念，在组件初始化的时候，对data中的某一个数组进行递归遍历，会对数组中数据的每一个属性进行劫持，添加set,get方法。我们后来.
vue 解决界面不渲染问题/下一次操作才渲染上一次操作的最新数据
热门推荐
树上骑个猴的博客
12-16 1万+
提示：首先确认数据是没问题的，此时如果是界面没有实施渲染，特别是等到用户下一次操作才渲染。以下的解决方案才有效果 出现问题的原因： 我使用了el-table，v-for渲染表单的控件，该表单中有两个下拉框，当A下拉框改变selected值时，B下拉框要去请求接口，更新下拉选项。此时把最新的下拉选项更新上去，但是我发现数据请求到了，赋值上去，但是下拉不会显示最新的，要等到再次改变A下拉框的seleted值时，B下拉框的下拉选项才显示上一次请求到的数据。 解决方案 this.$forceUpdate();
vue接口返回文字怎么渲染到页面
05-24
你可以通过 Vue 组件中的数据绑定来将接口返回的文字渲染到页面上。具体步骤如下： 1. 在 Vue 组件中定义一个数据属性，用于存储接口返回的文字。 2. 在组件的 `mounted` 钩子函数中发起接口请求并将返回的文字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值