vue切换数据更新但是页面不更新问题

最新推荐文章于 2024-05-16 12:57:52 发布
最新推荐文章于 2024-05-16 12:57:52 发布
阅读量3.2k 收藏
点赞数 1
分类专栏： vue 文章标签： html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddyy2695734664/article/details/107866484
版权

有三类数据，一开始是拿到全部数据，前端通过点击切换分类名称通过参数过滤显示对应的数据；

本来需求很简单，问题就是切换的时候数据处理逻辑以及最终数据结果都是正确的，但是Dom显示的内容一直都不更新，其中之前v-lazy懒加载的图片换成了:src，发现图片是可以正常切换，但是别的数据都没变，试了网上this. s e t 、 或 者 强 制 更 新 t h i s . set、或者强制更新this. set、或者强制更新this.forceUpdate()都不管用，和领导两个人各种办法试了半个小时都找不到原因，后来发现了一直忽视的一个报错，如图：
在这里插入图片描述
然后发现这个报错是谷歌浏览器翻译报的错，发现了之前不知道什么时候设置的浏览器页面翻译，如图：
在这里插入图片描述
瞬间感觉自己蠢哭了，才发现是vue的数据处理和浏览器的翻译处理冲突出了问题，数据问题算是解决，再后来把图片懒加载复原，发现图片无法正常切换，通过百度给img标签加上个key属性完美解决

为了记录一下没遇到过的问题，可能大部分人也遇不到

大大大颖er
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue数据更新但是界面却不刷新
05-04
在使用vue的过程中，很多时候会遇到数据更新但是界面却不刷新，这个附件代码可以帮你解决，看看吧
vue3数据更新页面不更新
m0_70542915的博客
03-14 3444
笔记
Vue修改数据页面不更新的问题解决_vue数据改变了,但页面数据没有更新
最新发布
2401_84446787的博客
05-16 770
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？
Vue数据更新视图不更新的几种解决方案
热门推荐
HELLO WORLD
10-16 5万+
在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。 Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。 数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测 push()，pop()，shift()，unshift()，...
【vue3】vue3 reactive 数据更新但是页面不更新
橙子的博客
12-02 2600
vue3数据更新但是页面不更新
解决 Vue 3 数据更新但是页面没更新的问题
Lovely Ruby 的手账
03-11 1466
列表的数据已经变了，但是页面没变。
Vue + Vue-router 同名路由切换数据不更新的方法
08-28
在使用 Vue + Vue-router 进行路由切换时，可能会遇到同名路由切换数据不更新的问题。这种情况下，组件可以服用，放在 ready 里获取数据，是不会执行的。这是因为在默认情况下，同名路由之间的切换，组件会被复用，...
Vue路由切换页面不更新问题解决方案
11-19
前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新...
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
01-21
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新； 2.解决办法： 数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟...
Vue切换组件实现返回后不重置数据,保留历史设置操作
10-15
主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 实现tab切换保持数据状态
10-15
在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。 首先，让...
vue2修改了数据 页面却没有更新
abcd123596的博客
01-05 628
当我们在vue2中修改了数据 修改成功了 视图却没有更新时 如何解决
Vue3数据更新，页面没有同步更新的问题
weixin_49267032的博客
06-28 1604
Vue3中数据更新，DOM没有随之更新的问题
vue2中解决数据更新视图不更新问题
qq_65591699的博客
09-20 925
【代码】vue2中解决数据更新视图不更新问题。
vue2修改数据页面不更新；vue监听不到数据变化；vue打印有值页面无数据
jieweiwujie的博客
12-22 740
【代码】vue2修改数据页面不更新；vue监听不到数据变化；vue打印有值页面无数据。
vue3——解决数据更新而视图未更新问题
weixin_44732078的博客
11-08 2万+
解决数据更新而视图未更新问题
vue项目中数据更新页面不刷新问题
qq_41538952的博客
06-24 2万+
这种情况可以分为很多种.但是究其原因就是vue3.0以下版本无法监听对象（包括数组以及对象）的变化，当数据发生变化的时候vue的刷新机制是监听不到数据变化的，所以需要我们在实际应用过程中通过各种处理来达到页面刷新的目的。 1.这是一种简单粗暴的解决方案吧,那就是在数据更新完成之后对页面进行重排和重绘操纵,但是这种方式对页面的消耗会急剧上升,不到万不得已还是不要使用的好，具体实现方法如下: 在data中定义一个阈值,比如show，初始为true; 代码实现： this.show = false; s
Vue数据更新，页面却没有更新的几种情况及解决方法
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
vue 改变数据后，数据变化页面不刷新
肥晨开发的学习之路
05-11 4919
this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。在vue项目中，会遇到修改完数据，但是视图却没有更新的情况。使用方法：直接调用即可，或者放到html里面使用。vue 改变数据后，需要滑动页面，数据才更新。vue中表格数据已改变，页面却未更新数据。vue 改变数据后，数据变化页面不刷新。
vue中页面切换但是双向绑定的数据缓存
06-09
在Vue中，页面切换时双向绑定数据的缓存可以通过以下几种方式实现： 1. 使用keep-alive组件：keep-alive组件可以将被包含的组件缓存起来，当组件被激活时，会从缓存中直接渲染，而不是重新创建。这样就可以保留组件状态，包括双向绑定的数据。 例如，可以在App.vue中使用keep-alive组件包裹router-view组件： ``` <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { name: 'App', components: {}, mounted() { console.log('App mounted.') } } </script> ``` 在路由配置中，可以通过meta字段指定哪些组件需要缓存： ``` const routes = [ { path: '/', name: 'Home', component: Home, meta: { keepAlive: true } }, { path: '/about', name: 'About', component: About, meta: { keepAlive: false } } ] ``` 2. 使用Vuex：Vuex是Vue的状态管理库，可以将组件的状态保存在全局的store中，从而实现数据的共享和缓存。 例如，在store.js中可以定义一个名为app的模块，用于保存应用的状态： ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ modules: { app: { state: { count: 0 }, mutations: { increment(state) { state.count++ } } } } }) ``` 在组件中可以通过this.$store访问store中的数据和方法： ``` <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { name: 'MyComponent', computed: { count() { return this.$store.state.app.count } }, methods: { increment() { this.$store.commit('app/increment') } } } </script> ``` 通过Vuex实现数据缓存的方式适用于需要在多个组件间共享数据的场景。 以上两种方式都可以在Vue中实现页面切换时双向绑定数据的缓存，具体使用哪种方式取决于实际需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值