解决 Vue 使用 $ref 调用子组件方法时的控制台报错
报错原因
代码和控制台报错, Uncaught TypeError: Cannot read properties of undefined
1 | this.$refs.chatting.getMessageLib() |
上述报错大多出现在操作弹窗子组件的页面元素的情景中，原因是子组件还未渲染到父组件的 DOM 中，就开始对子组件的元素进行操作了
解决办法
解决办法是把 ref 方法放到 vue 的内置函数中，$nextTick 可以等待 DOM 渲染完成后在调用里面的方法，这样控制台就不会出现报错了。
1 | this.$nextTick(() => { |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 泡泡的博客！
wechat
alipay
相关推荐
2021-12-21
Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹
注意！！！==注意！！！== 1、现在我已经将把 base64 转换成文件保存到指定位置的代码上传到了 maven 中央仓库，你们可以直接引入这个依赖使用2、如果想学习源码，那么就继续往下面看，下面第二章是我最简化的代码，实际我封装的方法要更复杂，支持更多传参类型和容错，比如你不需要传入文件后缀名，可以自动判断文件类型而你不需要传入文件后缀名，自动判断windows还是linux的路径格式，自动处理base64前缀，增加更多方法，将文件转换为 base64 码，你可以传入文件路径或者二进制文件流。 123456<!-- https://mvnrepository.com/artifact/icu.xuyijie/Base64Utils --><dependency> <groupId>icu.xuyijie</groupId> <artifactId>Base64Utils</artifactId> <version>1.3.3<...
2021-05-10
Vuex.Store里mutations和actions的区别，并实现异步加载的延时计数器
前言mutations和actions都是Vuex.Store里定义函数的方法 mutations定义的函数的参数都有一个state，表示store里的整个state数据，同步加载 actions定义的函数里的参数是content，代表整个store对象，用于异步加载 先上代码在说话便于比较，我把mutations和actions写到了一起 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
2022-01-17
Springboot 引入 EasyExcel 写入数据到流 直接让前端下载（Vue + axios请求）
前言easyexcel重写了poi对07版Excel的解析，能够原本一个3M的excel用POI sax依然需要100M左右内存降低到几M，并且再大的excel不会出现内存溢出，03版依赖POI的sax模式。在上层做了模型转换的封装，让使用者更加简单方便。 有时我们的用户需要导出他们查询到的数据，这时，就可以使用easyexcel直接将数据写入流，提供下载。 一、Springboot 引入 EasyExcel 依赖如果你在网上看到还要引入 poi 什么的依赖，那是针对旧版 easyexcel ，现在的版本不需要引入其他依赖，就下面的就可以了。 12345<dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>3.0.5</version></dependency> 三、前端代码123456789101112131415161718192021...
2021-12-24
Vue和Springboot实现SM4加密和解密（前、后端均可）
前言网站配置 https 比较麻烦，所以为了我们的用户账户安全，密码在从前端传输到后端的过程中，最好加密一下，选用 SM4 有两个原因，一是国产加密算法，二是这个国密算法是对称的，只要加密和解密的 key 和 vi 相同，可以很容易的解密，同时需要匹配 key 和 vi 又兼顾了安全。 我下面会提供前端的 SM4 加密 js 文件，vue 项目也可以使用，还有 Java 的 SM4 加密和解密文件。可实现前端加密传输到后端解密，存到数据库，后端也可以解密传输到前端进行明文的显示。 加密源代码网上有很多，但是代码语法和jar包陈旧，导致新版本jdk无法运行；以及 js 使用的语法太旧，导致 Vue 编译不通过（即使不使用 ESLint也不通过），所以我这个在他们的基础上修改了，后端只需引入一个依赖，前端语法已经规范修改，而且可通过 ESLint 的检测。 另外前后端的 SM4 加解密我已经上传到 npm 和 maven 中央仓库了，你们可以 npm install sm4util 和 引入到 pom 使用 123456<!--引入--><dependency...
2021-05-10
Vue动态路由的Query和Params传参方式
一、Query传参123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态路由Query方式</title> <script src="vue.js"></script> <script src="vue-router.j...
2021-11-30
Vue使用alibaba的iconfont矢量图标
网上有很多引入方法，官方也给出了三种引入方法，但是大多数人引入后都不会显示，或者是不能自定义样式，下面这种方法不会存在上面的那些问题，是目前最好的引入方式。 1、网址 阿里巴巴矢量图库 ，要求登陆后使用，先注册登录吧 2、登陆后，搜索想要的图标，比如用户、购物车什么的 3、鼠标移动到想要的图标上，点击“添加入库”，建议不要直接用复制SVG代码引入或者其他引入方式，先加入库在下载下来是最好的选择。 4、打开网址右上角的购物车，将所选的图标“添加至项目” 5、下载至本地，会得到一个压缩包，解压到当前文件夹 6、会出现这些内容，将除了demo开头的所有文件全部复制进项目的“asset”文件夹下的“iconfont”文件夹，没有的话自己新建文件夹 7、接下来用浏览器打开解压出来的文件夹里的demo_index.html，这些代码就是对应的每个图标，等下要用到 8、在代码中这样写，你的项目网页就会显示第一个图标，上图==  ==对应的那个图标 12345678<template> <...
评论