vue 解决当数据发生变化但页面没有变化

最新推荐文章于 2023-02-27 10:52:16 发布

无情无疫

最新推荐文章于 2023-02-27 10:52:16 发布

阅读量1.9k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/su_zhen_hua/article/details/111505350

版权

这篇博客探讨了在Vue中遇到数据更新但视图未相应改变的问题。作者通过介绍`this.$set`和`this.$nextTick`两种方法，提供了解决这一问题的方案，并分享了相关文章以供深入学习。

摘要由CSDN通过智能技术生成

数据发生变化页面跟着改变

- - - 任务
    - 代码
    - 效果
    - 推荐

任务

点击查看  弹出读头框，获取数据，然后拿着数据的设备id请求接口查询门锁状态，请求时表格显示加载中，请求结束根据数据显示对应状态。

代码


 <el-table-column
   label="门锁状态"
   :render-header="renderHeader">
   <template slot-scope="scope">
     <div v-if="scope.row.state"> 
       <span v-if="scope.row.state === '0'"> 关闭 </span>
       <span v-else-if=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

无情无疫

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
7
评论
vue 解决当数据发生变化但页面没有变化

阅读以下两篇文章this.$setthis.$nextTick
复制链接

扫一扫

专栏目录

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

欢迎来到C-Homes

10-01

1642

vue请求数据渲染到页面时，在渲染页面对数据进行处理，由于数据一开始初始化，数据还没请求回来，先渲染了页面，导致报错解决:在根元素上添加v-if(请求数据的其中一个属性)请求数据回来后才渲染页面 <template> <div v-if="good.good_id"> <img :src="good.good_img"/> <h2>{{good.good_title}}</h2&g

Vue中关于数据改变而页面不改变的解决方法。

周不会前端的博客

04-03

6704

vue中数据改变了然而页面视图还是上一次数据的内容；这里我用的是Vue里的 $set() 先来说说我为什么用set 由于受现代JS的限制，vue不能检测到对象属性的添加或删除。 vue会在初始化实例时对属性执行getter/setter 转化过程，所以属性必须在data对象上存在才能让vue转换它，这样它才能是响应的。 vue不允许在已经创建的实例上动态添加新的根级响应式属性，所以就使用Vue....

7 条评论您还未登录，请先登录后发表或查看评论

vue1 数据改变了页面显示没有变化

蚁族的奋斗的博客

11-22

2366

vue1 的在首次渲染的数据是可以监控到的，但是后来添加的属性如果不在首次渲染的时候就行声明式监控不到的，vue2 以后就没有这个问题了。首次渲染的数据就是data里面的数据这是官网的截图，所以还是要多看官网...

Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新

weixin_55560445的博客

11-25

4746

问题：用ajax或者axios，get数据是正常的。但是渲染数据时data一直为空问题代码：下面代码看起来是正常的，但是当运行的时候会报错：这时候你运行时会发现，数据可以请求到，但是会报错TypeError: Cannot set property ‘dataList’ of undefined data () { return { dataL...

vue异步数据报错_vue异步axios获取的数据渲染到页面的方法

weixin_39679370的博客

12-21

332

我们在vue，数据很多事异步获取来的，如果在template直接使用，会报错，undefined。因为先渲染后得到的数据，那如何才能不报错呢？computed!!!举个例子index.vue忽略坑人的传参方式。。。created(){this.init()this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":...

vue数据成功渲染却报错显示数据undifined

superChaoZi的博客

02-27

1171

问题:数据已经渲染出来,但是控制台还是报错数据undefined,主要是当页面加载完成后,数据并未加载完

vue列表数据发生变化指令没有更新问题及解决方法

10-15

Vue的响应式系统和VDOM机制旨在自动处理数据变化和视图更新，但在某些情况下，如上述列表更新问题，需要我们正确地设置`:key`属性来确保视图的正确同步。使用唯一ID或在指令中动态设置`key`都是有效的解决策略。在...

解决vue 路由变化页面数据不刷新的问题

08-27

然而，有时可能会遇到一个问题：当路由发生变化时，页面数据并未自动刷新。这种情况可能会影响用户体验，尤其是当你期望新路由加载时更新相应的数据。本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题...

vue 解决路由只变化参数页面组件不更新问题

10-16

当你使用Vue Router进行页面导航时，通常情况下，当路由路径发生变化时，对应的组件也会随之更新。然而，在某些情况下，如果路由只变化了查询参数（即URL中`?`后面的部分），而路径本身保持不变，Vue Router默认不会...

vue watch自动检测数据变化实时渲染的方法

08-28

Vue Watch 自动检测数据变化实时渲染的方法 Vue Watch 是 Vue.js 框架中的一种机制，用于实时检测数据的变化，并执行相应的操作。它可以让开发者轻松地监听数据的变化，并执行相应的逻辑。下面是 Vue Watch 自动...

vue页面展示数据没有问题但是控制台报错TypeError: Cannot read property ‘avatar_url‘ of null“

weixin_45890764的博客

05-09

1262

场景：当我们从服务器取数据的时候，我们把取来的数据放到页面上，正常来看，数据取来了，页面显示也正常，但是一看控制台，报错原因：这是因为，ajax是异步，当我们解析html文档的时候，需要的数据还没来，所以浏览器会认为你写的有问题，但是很快，数据来了，页面发生重排和重绘，这样看，咱们的数据展示是没有问题的，但是最开始浏览器解析文档时，会报错解决方式：使用v-if v-else来做判断，比如：如果数据还没来，我们就请稍等，来了就展示，这样浏览器就不会报错了。 ...

vue中怎样解决后台发过来的数据，页面有显示，但其他地方访问不到

Jack, what else can you do besides holding your little darling?

12-18

293

vue中怎样解决后台发过来的数据，页面有显示，但其他地方访问不到

关于vue-cli2.x的踩坑，axios本地跨域问题，页面渲染问题，已有接口，3000端口能拿到数据，8080端口拿不到，vue+nodejs+mongodb全栈商城项目

二喵丶的博客

11-06

634

由于我看的视频用的vue-cli2.3.1和webpack2.3.3,这个版本生成出来的vue项目build文件夹下有dev-server.js和dev-client.js文件，而我当时不清楚vue-cli较新版本具体哪些不同，跟着视频敲命令cnpm i -g vue-cli导致装的版本为2.9.6，cnpm i -g webpack装的版本为4.41.2,导致我这样生成出来的vue项目build...

使用Vue框架数据无法渲染到页面解决方法

qq_44089649的博客

05-14

3449

使用Vue框架数据无法渲染到页面解决方法页面无法渲染的原因解决方式页面无法渲染的原因 Vue绑定事件的区域与渲染数据的区域不在同一个大的区域 html页面： <html> <div id="max">  <div id="top"> <div id="top_top"> <input type="text" placeholder=" 搜索课程" id="search" />

vue中跳转当前页无法重渲染且报错问题

u013361179的博客

05-21

672

vue中跳转当前页无法重渲染且报错问题

element的分页查询后页面数据变了，分页却没变的问题

zheshihuahua的博客

01-12

2047

从最后一页点击查询后，页面数据变为第一页的数据了，但是分页会显示2

vue 获取到数据但却渲染不到页面上

军火库

06-18

9789

很多时候对数据进行处理了，但是页面上就是没变化，没效果，用 console.log 打印数据都没问题，特别是数组、对象容易出现这个问题；保存变量，（向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性）删除对象的属性，（如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它）强制更新，迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入

学习vue2遇到过的问题及个人总结

刘大猫

05-26

2601

学习使用vue2时，碰到的问题及个人总结介绍

vue 当数据改变时，页面没有发生变化

yin_you_yu的博客

04-15

8351

如果出现当数据改变的时候页面并没有重新渲染，遇到这种情况一般是以下几种情况： 1. data 数据里是数组类型的数据，然后数据改变的时候是这么操作 this.myList[2] = 'update' 这样写vue监听不到数据改变，应改用 splice 这种. this.myList.splice(1) 2. 在初始化数据时，date里没有这个属性。是动态添加的。 this.$s...

vue3当请求的数据发生变化时自动刷新页面