在vue项目中，数据已经在页面渲染，但在后续操作时获取不到数据

已于 2023-12-14 11:01:25 修改
阅读量555 收藏 7
点赞数 9
文章标签： 前端
于 2023-12-14 10:59:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M030124/article/details/134990240
版权

如下图

产生这个问题的原因

异步问题

如何解决

方法一：可以将其存放在一个setTimeout里面（利用一个极小的延迟来获取数据），如下图

效果

方法二：将操作放入axios里面，如下图

花~海
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈vue,angular,react数据双向绑定原理分析
01-21
框架帮忙分离数据和视图，后续状态更新需要手动操作DOM，因为框架只管首次渲染，不追踪状态监听变化。 双向数据绑定 当我们在前端开发中采用MV*的模式时，M – model，指的是模型，也就是数据，V – view，指的是...
前端vue2源码梳理文档
07-31
前端 Vue2 源码梳理文档 ...在渲染视图阶段，Vue 会将视图渲染到浏览器中。 Vue2 是一个功能强大且广泛使用的前端框架。了解 Vue2 的原理和机制可以帮助我们更好地使用 Vue2，并提高开发效率。
Vue中异步：Async和await的使用（echarts画图，DOM渲染的时候，还没有请求到数据）
zzzz121380的博客
11-03 2007
Vue中异步：Async和await的使用（echarts画图，DOM渲染的时候，还没有请求到数据） 首先看示例： async function test() { console.log(0) await console.log(111);//在第一个await表达式出现之前，异步函数内部的代码都是按照同步方式执行的 console.log(555) //倒数第二个输出 console.log(556665)//最后一个输出 } function test1(){
vue子组件在还没有获取到父组件数据数据时，报错
c_qianxia5040的博客
08-21 631
显示默认值问题，给传给子组件的值赋一个默认值
vue中使用axios获取不到响应头Content-Disposition的解决办法
最新发布
2301_76604664的博客
04-09 1775
【代码】vue中使用axios获取不到响应头Content-Disposition的解决办法。
vue在created异步请求数据，通过v-for渲染；在mounted中获取不到数据和Dom的解决方案
Moon Star
08-12 1万+
问题： // template <div class="scheme-tab" v-for="(tab,index) in tabs" :key="tab.id" > // JS async created() { this.tabs = await this.fetchSolutionTypes(); console.log(JSON.stringify(this.tabs)); // 有数据 }, mounted() { console.log(JSON.s
vue数据渲染时拿不到值报错
MittyLee的博客
06-23 2039
{{dataAll.first.name}} 使用{{}}双花括号在html页面进行数据绑定时，从一个对象中获取，超过两个.就报错，如下代码报错提示为 获取数据是异步进行，vue先执行绑定的数据，但此时赋值为空，直接拿两层是拿不到数据的。 解决办法：在data：里给first一个赋值为空，这样初始化时不会报错 data: { dataAll : { first : {}, } }, ...
Vue异步执行接口请求，解决数据获取不到就去加载的问题
qq_43512769的博客
05-28 7291
通过vue的异步请求数据的方法，去解决页面加载但是没有数据的问题 在main.js中引入全局异步请求的方法。代码如下 //全局引用异步执行请求方法 这里的可以通过传入在某个页面想要请求的接口 Vue.prototype.$visitStore = async (option) => { //如果是ajax，注意要加同步等待 await http.get({ url: '/s***e/ch****ys', // url: option，直接这样引用即可，我这里是写死了 }).t
vue大数据表格卡顿问题的完美解决方案
01-19
vue渲染小数据挺快,大数据vue开始出现卡顿现象，本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑，chrome浏览器无卡顿现象，其它浏览器并未测试，如遇到卡顿...
vue面试题30道经典
02-22
在 MVVM 中，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此通过视图操作数据，也能通过数据操作视图。 Vue 的两个核心 数据驱动和组件化思想。...
vue 快速入门指南.docx
11-22
Ajax 的出现，使得开发人员可以不刷新页面就可以更新页面的数据和渲染效果。Ajax 的盛行，使得开发人员不仅仅需要编写 HTML 样式，还需要懂得 Ajax 与后端交互，然后通过 JS 操作 Dom 元素来实现页面动态效果。 三...
vue项目获取不到异步数据dom的解决方案
北极那企鹅丶
01-28 2054
我们都知道在created钩子函数获取异步数据，mounted钩子函数里面获取dom节点，但是如果出现这种情况，你获取的异步数据比mounted钩子函数还要滞后，导致异步数据的dom渲染不出来，那么这种情况怎么解决呢？ 第一种方案 为了确保异步数据确实获取到了，我们可以在异步数据获取成功里面的回调写我们的逻辑。 // 以下为伪代码 methods: { async getList() { await getList() // 这里成功获取异步数据 this.$nextTick(() =>.
vue开发请求的数据渲染过程中丢失了
LiuxiaoXue_2018的博客
05-22 218
vue开发请求的数据渲染过程中丢失了
vue开发中，数据还没获取，页面已经渲染，导致页面没有数据
热门推荐
weixin_48677331的博客
12-28 2万+
在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。 如何解决？ 使用 v-if 根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。 上代码 <h4 v-if="isShow">{{ data }}</h4>
Vue:关于element中Select组件点击选中数据没有显示选择的数据问题
qq_45061461的博客
11-06 1279
这是修改窗口，点击编辑的时候将用户之前选中的数据直接赋值给select的数组中，但是将再次点击选择内容的时候，点击选中的数据没有勾选状态并且，对应的输入框中没有添加，如果添加@change时间，获取到选择框接收的数组又新增了数据。此时只要在@change绑定的方法中添加 this.$forceUpdate() 强制刷新数据就出现了。1代表的是1部，2代表的2部。
Vue项目中data数据无法被window.addEventListener中获取
silver577的博客
07-17 2328
Vue项目中data数据无法被window.addEventListener中获取
【Vue】关于页面渲染完成之前拿不到数据的问题
wangffan12的博客
02-27 733
watch的使用 动态生成一个Tree 挂载阶段拿不到数据
vue系列：vue不触发数据变动的几种情况
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-29 3022
简述vue双向绑定 把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 用户看不到 ...
vue中, 页面跳转只打开一个标签页,后续打开的页面都在这个标签页展示,怎么实现?
06-10
在 Vue 中实现页面跳转只打开一个标签页，后续打开的页面都在这个标签页展示，可以使用 Vue Router 的导航守卫来实现。 具体实现步骤如下： 1. 在路由配置中，给需要跳转的路由设置一个唯一的 name。 ```javascript const routes = [ { path: '/home', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] ``` 2. 在路由跳转前，判断当前路由是否已经打开过，如果已经打开过，则不需要再打开一个新的标签页。 ```javascript router.beforeEach((to, from, next) => { const routerList = store.state.routerList const index = routerList.findIndex(item => item.path === to.path) if (index !== -1) { // 如果已经打开过，则将当前路由设置为激活状态 store.commit('setActiveRouter', routerList[index]) next(false) } else { // 如果没有打开过，则将当前路由添加到路由列表中 const router = { path: to.path, name: to.name, title: to.meta.title || to.name, icon: to.meta.icon || '', query: to.query, params: to.params } store.commit('addRouter', router) store.commit('setActiveRouter', router) next() } }) ``` 3. 在页面渲染时，根据当前激活的路由来展示对应的组件。 ```html <template> <div class="main"> <component :is="activeRouter.name"></component> </div> </template> <script> export default { computed: { activeRouter () { return this.$store.state.activeRouter } } } </script> ``` 上述代码中，我们通过 store 来保存路由列表和当前激活的路由，并在页面渲染时展示对应的组件。这样就可以实现页面跳转只打开一个标签页，后续打开的页面都在这个标签页展示的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值