【vue】解决Vue请求数据后渲染页面出现报错

最新推荐文章于 2023-05-04 10:01:10 发布
最新推荐文章于 2023-05-04 10:01:10 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45802163/article/details/120577512
版权

vue请求数据渲染到页面时，在渲染页面对数据进行处理，由于数据一开始初始化，数据还没请求回来，先渲染了页面，导致报错

解决:在根元素上添加v-if(请求数据的其中一个属性)请求数据回来后才渲染页面

    <template>
        <div v-if="good.good_id">
            <img :src
最低0.47元/天 解锁文章
HolmesChal
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3解决Vuex异步获取数据，页面先渲染问题
weixin_67560997的博客
03-05 5005
Vue3解决Vuex异步获取数据，页面先渲染问题
vue开发中，数据还没获取，页面已经渲染，导致页面没有数据
热门推荐
weixin_48677331的博客
12-28 2万+
在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。 如何解决？ 使用 v-if 根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。 上代码 <h4 v-if="isShow">{{ data }}</h4>
VUE工程根据数据情况进行V-if渲染，当数据还没返回结果，或者数据返回有问题时候，提示data.X未定义错误解决方案
happy81997的博客
07-13 2484
场景描述： VUE工程根据数据情况进行V-if渲染，当数据还没进行到哪一步，还没返回结果，或者数据返回有问题时候，提示data.area（数据没有，更不会获取到数据的某个属性值）未定义错误 问题解析： 没有请求到数据，就无法获取到数据的某个属性值，但是很多时候我们还需要设置数据的属性值 解决办法： v-if中添加一个data.length的判断。 v-if="data.length >0" 确保数据有结果了，才进行渲染即可 ...
vue 获取到数据但却渲染不到页面上
军火库
06-18 9554
很多时候对数据进行处理了，但是页面上就是没变化，没效果，用 console.log 打印数据都没问题，特别是数组、对象容易出现这个问题； 保存变量，（向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性） 删除对象的属性，（如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它）强制更新，迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入
解决vue.js 数据渲染成功仍报错的问题
12-09
最近在做一个vue项目，用的是官方推荐的axios请求数据，数据结构是一级对象嵌套二级对象，发现一级对象数据渲染不报错，二级数据渲染报错。很是郁闷！data函数如下 export default { name: 'hello', data() { ...
浅谈vue异步数据影响页面渲染
01-19
今天遇到一个问题，要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中，而在页面渲染时session中还没有user，页面直接报错。 因此我希望能在所有请求都得到后再去做页面的渲染。 1....
解决vuex数据异步造成初始化的时候没值报错问题
12-13
vuex的数据是异步的，当我们页面需要直接拿vuex的值进行渲染的时候，初始化瞬间（即请求过程进行的时候），vuex是没有这个值的，如何解决这个问题，暂时总结了三种方法，希望有遇到的大佬进行补充和查错： ...
解决vue2.0动态绑定图片src属性值初始化时报错的问题
08-27
在某些情况下，图片 src 属性值的初始化可能会出现错误，例如，在数据字段 captcha_id 需要通过网络请求取得时。如果页面已经渲染完成，而图片的 src 属性值还没有被正确设置，这可能会导致 404 错误。 3、解决方案...
在vue中实现清除echarts上次保留的数据(亲测有效)
10-14
在Vue.js应用中，使用ECharts进行数据可视化时，可能会遇到一个问题：当用户多次请求数据并更新图表时，ECharts可能会保留之前的数据显示，导致新数据无法正常渲染。为了解决这个问题，我们需要找到一种方法来清除...
Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新
weixin_55560445的博客
11-25 4717
问题： 用ajax或者axios，get数据是正常的。但是渲染数据时data一直为空 问题代码：下面代码看起来是正常的，但是当运行的时候会报错： 这时候你运行时会发现，数据可以请求到，但是会报错TypeError: Cannot set property ‘dataList’ of undefined data () { return { dataL...
vue3 js中存在数据，但却无法渲染的情况
qq_43382759的博客
10-01 2966
vue bug
vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化
reason125132的博客
05-04 8821
vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。
学习vue2遇到过的问题及个人总结
刘大猫
05-26 2163
学习使用vue2时，碰到的问题及个人总结介绍
vue接口返回数据页面没有重新渲染
蒙蒙细雨的博客
12-15 2253
页面初始值models为空对象，接口返回赋值后，页面没有重新渲染 解决两种方式： 一：this.$set(obj, key, value) this.$set(this.models,item.propcode,item.propvalue) 这种方法试了下，输入框的值回显了，但是上传的文件没有 二：Object.assign(target, sources) this.models=Object.assign({}, this.models) 这种的上传文件也是不显示 三：还是用的老方法，声明一.
Vue发axios请求，数据成功拿到，但是不能渲染到页面的问题
Anana13的博客
05-23 9963
Vue发axios请求，数据成功拿到，但是不能渲染到页面的问题。 昨天还还好的项目，今天开服务器代理报错。一开始以为代理有问题，就各种搜，无效。 最后竟然发现是接口出了问题！！！ 找到新的接口后，拿到数据，但是还是无法渲染到页面，又是各种搜。。。 最后看工具，发现JSON数据获取的是对象，我按着数组处理的，肯定不对啊。。。太蠢了。。以下是我修改的过程，希望可以帮到你 查看JSON数据格式 获取到的JSON是对象中包含数组 返回查看发请求的代码 这是改之前的错误代码 mounted() { thi
vue页面展示数据没有问题但是控制台报错TypeError: Cannot read property ‘avatar_url‘ of null“
weixin_45890764的博客
05-09 1239
场景：当我们从服务器取数据的时候，我们把取来的数据放到页面上，正常来看，数据取来了，页面显示也正常，但是一看控制台，报错 原因： 这是因为，ajax是异步，当我们解析html文档的时候，需要的数据还没来，所以浏览器会认为你写的有问题，但是很快，数据来了，页面发生重排和重绘，这样看，咱们的数据展示是没有问题的，但是最开始浏览器解析文档时，会报错 解决方式： 使用v-if v-else来做判断，比如：如果数据还没来，我们就请稍等，来了就展示，这样浏览器就不会报错了。 ...
vue 解决当数据发生变化但页面没有变化
墨茶Official 愿你在二次元有吃不完的草莓 饺子(ㄒoㄒ)
12-22 1895
阅读以下两篇文章 this.$set this.$nextTick
vue父传子组件数据不渲染且报错
wingxabc的博客
11-12 1648
在vue开发过程中会遇到这样的一个问题，自己定义了一个组件，然后又定义了个子组件，父组件的数据需要将请求回来的数据传递给子组件，但是引入子组件在页面加载时就报错了，接口数据请求回来了也不渲染，这是因为接口请求和子组件渲染是同步的，子组件没有接收数据，父组件的接口数据请求回来时子组件已经创建好了虚拟dom，所以子组件报错，同时子组件里的prop不想响应的，所以不会再次更新dom，接口请求回来的数据也不会更新。 解决方法1：在子组件条件v-if，在接口请求回来后在渲染。 解决方式2：使用watch或者com
vue页面渲染在请求
最新发布
07-27
回答: 在Vue页面渲染时，可以使用v-if指令来控制元素的显示与隐藏。在根元素上添加v-if指令，并将其绑定到请求数据的其中一个属性上，当该属性有值时，才会渲染页面。例如，在模板中可以这样写: ```html <template> <div v-if="good.good_id"> <img :src="good.good_img"/> <h2>{{good.good_title}}</h2> <!-- 其他内容 --> </div> </template> ``` 这样，在请求数据回来后，如果good.good_id有值，页面才会被渲染出来。这样可以确保在数据请求完成之前，页面不会显示空白或错误的内容。 #### 引用[.reference_title] - *1* [【vue】解决Vue请求数据后渲染页面出现报错](https://blog.csdn.net/weixin_45802163/article/details/120577512)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值