【推荐!!!】vue修改数据页面不更新;vue监听不到数据变化;vue打印有值页面无数据;this.$set ; this.$nextTick ; this.$forceUpdate

场景:vue是双向数据绑定的,那么在修改data数据时候,页面也应该是变化的,但是偶尔会遇到
1.vue修改数据页面不更新,既data数据变化了,但是页面渲染没变化。
2.或者vue监听不到数据变化;
3.vue打印有值页面无数据到

情景一、修改的data数据,原先没声明,使用this.$set

  data () {return {obj:{a:1}}}
this.obj.b = 2 // 原先就没有b这个属性 即使赋值 页面也不会渲染

只有使用this.$set(目标对象,属性,值) 数据才是动态双向绑定的

this.$set(this.obj , 'b',  2) 

情景二、使用this.$nextTick,这种情况针对明明console.log打印有值。页面却没有值,看vue查看的data数据也确实没有值。此时使用下方包裹

      this.$nextTick(() => {this.obj.a = 'a'})

情景三、使用 this.$forceUpdate()迫使Vue 实例重新渲染

情景四、如果都无效,那么将上方的糅合嵌套使用

      this.$nextTick(() => {this.obj.a = 'a'this.obj.timeDate = + new Date() // 最好给原数据里就先声明个 timeDate 然后改值触发obj监听this.$forceUpdate()})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402868.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探讨NDK编译错误ld.exe: Dwarf Error: mangled line number section.

如题所示的NDK编译错误是什么原因导致的?我的困惑今天在把WIN32下的一个工程移植到ANDROID时遇到上述错误,感到非常困惑。错误如下:D:/ndkr8/toolchains/arm-linux-androideabi-4.4.3/prebuilt/windows/bin/../lib/gcc/arm-linux-androideabi…

Visual Studio Code之常备快捷键

From: https://blog.csdn.net/u010019717/article/details/50443970 孙广东 2015.12.31 官方快捷键大全:https://code.visualstudio.com/docs/customization/keybindings Visual Studio Code是个牛逼的编辑器,启动非常快,完全可以用来代替其…

jquery中cookie用法实例详解(获取,存储,删除等)

这篇文章主要介绍了jquery中cookie用法,结合实例详细分析了jQuery操作cookie的获取,存储,删除等操作,并附带了Jquery操作Cookie记录用户查询过信息实现方法,需要的朋友可以参考下本文实例讲述了jquery中cookie用法。分享给大家供大家参考,具体如下: cook…

js计算日期差;js计算天数差

场景:首先要注意两种情况 1.只是计算年月日的天数差,例如2022-10-10 12:00:00与 2022-10-11 00:00:00 相差1天 2.计算包含时分秒的天数差,例如2022-10-10 12:00:00与 2022-10-11 00:00:00 相差0天 3.注意safari浏览器 将时分秒的转化为时间戳…

非常全的VsCode快捷键

From: https://segmentfault.com/a/1190000007688656 常用 General 按 Press功能 FunctionCtrl Shift P,F1显示命令面板 Show Command PaletteCtrl P快速打开 Quick OpenCtrl Shift N新窗口/实例 New window/instanceCtrl Shift W关闭窗口/实例 Close wind…

Iptables-Fail2ban处理bind 非法***

早上发现DNS流量有些异常,查了query.log日志如下: 9-Apr-2013 13:49:33.418 queries: info: client 199.19.213.88#25345: view other_user: query: isc.org IN ANY ED (183.60.126.74) 09-Apr-2013 13:49:33.475 queries: info: client 199.19.213.88#25345: view …

通过挂载系统光盘搭建本地yum仓库的方法

1、配置本地yum源(挂载光盘) mkdir /medir/cdrom(创建目录) mount /dev/cdrom / medir/cdrom (挂载到/ medir/cdrom目录) 2、修改yum配置文件 3. 修改挂载路径/ medir/cdrom, 将gpgcheck1改为0 enabled0改为1. 4. yum list …

谷歌划词翻译

谷歌划词翻译是个谷歌插件 复制及时翻译很好用 插件下载地址 配置谷歌翻译方法

[tp5] thinkPHP5-渲染模板的方式

From: https://blog.csdn.net/Wake_me_Up123/article/details/76096174 默认情况下,控制器的输出全部采用return的方式,无需进行任何的手动输出,系统会自动完成渲染内容的输出。 在控制器里渲染模板 namespace app\index\controller;use t…

.net 预编译 提示中导入的类型 冲突

之所以会出现你遇到的这个问题,是因为项目引用了自身的Dll文件,系统就把项目本身和项目本身生成的DLl文件看成两个项目来对待,因为它们两个本身就是对等的,就会出现冲突的问题。解决办法很简单,就是去掉项目对自身的引…

如何对Javascript代码进行二次压缩(混淆)

如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间。但是,不是所有的变量(方法)都能被混淆的,一般来说,只…

vue项目添加百度统计

vue项目添加百度统计

如何在网页标题栏title加入logo(icon)图标?

From: https://www.cnblogs.com/lyp123/articles/5661661.html 打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一&#xf…

教你如何在linux 下批量卸载

教你如何在linux 下批量卸载 最 近本来想在linux 下配置 JDK 6.0 用来开发java,然后遇到很多麻烦,一开始的时候屁颠屁颠的到SUN的网站去下载个 JRE 的bin 文件,这个文件比较小,几十MB而已,安装的时候它自动安装在 /usr…

Unity AssetBundles and Resources指引 (三) AssetBundle基础

本文内容主要翻译自下面这篇文章 https://unity3d.com/cn/learn/tutorials/topics/best-practices/guide-assetbundles-and-resources?playlist30089 A guide to AssetBundles and Resources 第三部分 AssetBundle基础 3.1概览 AssetBundles系统提供一种手段把一个或多个Asse…

vue项目启动成功浏览器不显示

场景:vue项目启动成功,无任何报错,但是浏览器却一直加载,页面始终是空白。 如果你的项目用到了element-ui的标签页组件el-tabs组件,那么大概率是此组件引起的浏览器卡死问题。 可以现将el-tabs的代码注释掉&#xff0c…

几种常用的清除浮动方法(一)

From: https://www.cnblogs.com/nxl0908/p/7245460.html 1、父级div定义伪类&#xff1a;after和zoom <style type"text/css"> .div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px…

vi and vim 用法

a 在当前光标后面插入字符 i 在当前光标前面插入字符 I 在当前行首插入字符 A 在当前行尾插入字符 o(字母)在当前光标下一行插入字符 O(字母)在当前光标上一行插入字符 b移动光标到当前字符串的第一个字符 B移动光标到当前行的第一个字符(以空格分隔) cc 删除光标所在行并编辑 …

CentOS 7 yum 安装php5.6

配置yum源 追加CentOS 6.5的epel及remi源。 # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm # rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm以下是CentOS 7.0的源。 # yum install epel-release # rp…

h5下载静态文件

1.需要将文件放src的下面的static的文件夹内 2.如果下载的是浏览器不能识别的&#xff08;例如&#xff1a;.exe,.zip,.doc等&#xff09;内容&#xff0c;浏览器会直接进行下载&#xff0c;但是如果下载的是浏览器可以识别的&#xff08;例如&#xff1a;.png,.jpg等&#xff…