Vue视图未更新再次踩坑

最新推荐文章于 2024-05-09 10:14:14 发布
最新推荐文章于 2024-05-09 10:14:14 发布
阅读量219 收藏
点赞数
分类专栏： Vue.js 文章标签： chrome devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvonve/article/details/112287272
版权
本文记录了一次在Vue中遇到数据更新但视图未更新的问题，问题在于初始化时直接赋值导致数据未变为响应式。通过改变赋值方式，解决了这一问题。同时提醒开发者，如果Vue Devtools中的数据未更新，可能是页面未使用响应式数据或使用了非响应式数据。
摘要由CSDN通过智能技术生成

原文首发地址：https://github.com/Daotin/fe-blog/issues/

你也可以从下面地方找到我：

今天遇到一个Vue数据更新了，但是视图未更新的问题，折腾了我2小时才搞定，有必要记录下来，防止日后再次踩坑。

问题描述

我需要显示一个列表，而且列表是可编辑的。比如可以修改列表每一项的名称等。

我从后端获取列表后，对其中的每一项数据进行初始化，增加一个editing 可编辑属性。

me.groupList.forEach
最低0.47元/天 解锁文章
前端队长
关注
专栏目录
Cause: java.sql.SQLSyntaxErrorException: Table ‘master.user‘ doesn‘t exist表/视图不存在踩坑记录（提供Gitee源码）
黄团团的个人博客
07-19 245
org.springframework.jdbc.BadSqlGrammarException:### Error querying database. Cause: java.sql.SQLSyntaxErrorException: Table 'master.product' doesn't exist表/视图不存在。
vue2、vue3开发工具 dev tools，页面数据更新，data里或者是setup的数据不更新，需要更换增强版插件
05-09
页面数据更新，但是data或者setup里面的数据不更新，卸载原来的开发插件，卸载浏览器都无法解决。只有下载该插件才能解决。
Vue数据更新页面没有更新问题总结
沫途的博客
05-29 984
Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以property必须在data对象上存在才能让vue转换为响应式 // 问题 var vm = new Vue({ data: {}, template: '<div>{{item}}</div>' }) vm.item
解决Vue devtools插件数据变化不会自动刷新
最新发布
developerFBI的专栏
05-09 605
解决Vue devtools插件数据变化不会自动刷新
已解决：安卓自带的webview加载前端h5项目白屏时长严重，vue首页加载白屏时间过长，那我让app进入的时候就提前加载网页
Spy003的博客
04-15 6161
描述一下我的情况，我写了一个vue项目，需要嵌在安卓里运行，没想到安卓webview加载vue会这么慢，不知道是哪里出了问题，先介绍一下我的abandon的思路：1、启用本地有缓存就就从缓存中加载，没有缓存就从网络加载的方式，这个缓存模式，仍然阻挡不了第一次没有缓存的白屏很久的情况，虽然第一次过后速度会明显加快，但是第一次的慢客户也是不接受的呀，于是这种只是我在开发过程中体验体验了，而且开启了这种缓存模式，vue有js更新也不能更新到缓存，还是要清缓存才行。于是这种方案在提交测试之后就放弃了。预加载、
vue数组改变但是页面不更新的解决方案
是我的温柔啊
05-11 6934
分类 1、由于javascript的限制，某些情况vue会监听不到数组的变化，例如：items[index] = newitem 2、或者是数组结构过于复杂和深度过深，也可能导致更新出现问题。 解决方案 1、当使用items[index] = newitem这类写法，页面监听不到数组变化，可修改写法：this.$set(this.items,index,newitem) 2、当是结构复杂或深度过深时，可采用此方法： 首先定义一个变量为keyDate: 0 在数组变化，需要更新页面的地方加上个绑定的:key=
vue 预检_vue全家桶+element 项目踩坑总结
weixin_30486717的博客
02-22 264
项目简介vue + axios + vue-router + vuex + ElementUI架构vuevue数据更新，视图不更新只有当实例被创建时 data 中存在的属性才是响应式的，Vue 不能检测对象属性的添加或删除；可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性Vue.set(vm.userProfile, 'age', 27)this.$s...
vue+element踩坑集锦
qq_40876719的博客
09-05 623
1、element表单验证使用： //baseinfo用于保存表单元素的值，baseRules保存验证规则 <el-form :model='baseInfo' :rules='baseRules'> //rule1是定义在baseRules下的一个验证规则 /**要注意的是prop、v-model和rules下的验证属性名字必须相同！！！ *从而验证规则一一对...
Vue面试题
guangmiao1130的博客
01-07 651
vue面试题
webview src已修改但页面不刷新
为啥不能换名字的博客
03-29 1040
因为我的h5地址是vue哈希模式的 所以时间戳加在后边参数无效 需要加在#后才行 所以如果需要刷新h5页面就加一个这样的时间戳就好了
小程序内使用web-view组件嵌套H5页面,当H5页面更换了内容后，小程序里的h5页面不更新问题处理
weixin_43988116的博客
06-15 1172
小程序内使用web-view组件嵌套H5页面，当H5页面更换了内容后，小程序里的h5页面不更新问题处理
webview踩坑之数据无法更新
jacoby_fire的博客
07-11 1948
这两天项目中遇到了一个问题，觉得挺有意思，记录一下。 背景： 项目是混合应用，原生开发嵌入H5webview。H5是用的vue多页应用结构。 问题描述： 需求中有一个页面有个入口，需要跳转到项目另一个url。是调用原生的方法跳转到之前开发的页面。原生的逻辑是新开一个webview去跳转。这里我们称原webview为w1, 新开的为w2。 在W2中，我们有一些操作会导致数据有变动，这时我们需要返回到W1中，返回的操作也是调取原生方法去关闭W2，对W1没有任何操作。导致W1的数据不会重新请求刷新，展示的
v-if=“this.form.getFieldValue(‘xxx‘)“ 内部使用v-decorator无法显示数据
2302_76466023的博客
03-06 570
是否启用: <a-switch v-decorator="['', validatorRues.a]" @click="onClick"/>是否启用: <a-switch v-decorator"['a', validatorRues.a]" />可以设置model或者使用现有的data对象来接收a的初始值并为a-switch设置方法。在表单数据中需要先使用a选择是否启用b 来决定是否显示b输入框，使用v-if判断。但是如果form有初始值时，页面回显无法显示b的初始值。
解决Vue devtools插件state数据变化不会自动刷新
陈福国的博客
01-06 1907
我们使用devtools插件在监测vuex中state数据，发现数据发生变化后，不会自动更新，页面数据已经最新了，但是devtools中还是老数据，必须手动点击devtools刷新才能拿到最新的数据。
vue数据不实时更新（数据更改了，但数据不实时更新）
zhangjing1019的博客
05-16 2万+
一、在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 ，需要用vue内置的方法 二、Vue.set() 响应式新增与修改数据 此时我们需要知道Vue.set()需要哪些...
vue数据不更新的原因(vue中数据更改了，但是视图没有更新)
热门推荐
web前端学习总结
09-21 15万+
vue数据不更新的原因(vue中数据更改了，但是视图没有更新) 参考链接 templete: &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h2&amp;gt;{{dataObj.text}}&amp;lt;/h2&amp;gt; &amp;lt;/div&amp;gt; js: new Vue({ el: '#app',
vue数据不更新问题
AS、SD的博客
07-09 305
平时我们更新数据一般这样写 data(){ return { sku:[{ a:'111', b:'111' },{ a:'222', b:'222' }] } }, methods:{ demo(){ //然而这样并没有实时的更新 this.sku[1].a= '123'; //把上面的替换成$set更新就可以了 this.$set(this.skus[1], 'a', '123') } } ...
vue3 vue-devtools 不生效问题解决
qq_41914185的博客
03-20 4342
vue3 vue-devtools 不生效问题解决
Vue中ECharts数据更新视图不更新的解决方法
"本文主要探讨了在Vue应用中使用ECharts图表时遇到的数据更新但视图未更新的问题，尤其关注ECharts图表嵌入Vue弹框的场景。文章提供了具体的解决方案，并给出了相关的Vue组件代码示例。" 在Vue与ECharts结合使用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值