1.安装 qrcodejs2:

npm install  qrcodejs2 --save

2.页面中引入:

import QRCode from "qrcodejs2";
 
components: {
  QRCode
}
 
3.dom结构:
<div id="qrcode" ></div>
 
4.使用:
qrcode (url) { // 生成二维码
  let that = this;
  let qrcode = new QRCode('qrcodeId', {
  width: 300,
  height: 300, // 高度
  text: url, // 二维码内容
  // render: 'canvas' , // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
  // background: '#f0f', // 背景色
  // foreground: '#ff0' // 前景色
  })
}
 
5.页面调用:
//  注意: 在需要调用的地方  这样必须这样调用  否则会出现  appendChild  null  就是id为qrcode的dom获取不到 返回结果为null
this.$nextTick (function () {
this.qrcode();
})
 
正常使用流程就是这样,一切OK,大吉大利,今晚吃鸡,等等,有问题出来了 。。。
因为我们很多时候并不会像这样直接用,而是会在组件间使用,如果是组件间涉及了通信机制,就会很正常的用到Vuex进行全局状态的管理,然后呢,各位看官请接着往下看:

在计算属性中获取URL的值,然后进行qrcode渲染,结果就是:

可以看到这里被渲染了两次,

 原因:
我通过调试猜测是qrcode的渲染机制和Vue的computed计算属性有错误,
解决办法:
将vue的计算属性通过观察者模式来输出

OK,现在就可以正常渲染了:

 具体原因因为时间原因没法深入探究,我会找个空闲的机会把问题查清楚,如果有错误的地方还请大家指出,希望本文对你有所帮助!
 
 

vue中使用qrcode,遇到两次渲染的问题的更多相关文章

  1. vue中数据接收成功,页面渲染失败

    1.vue中数据接收成功,页面渲染失败.代码如下 经过查找资料修改代码为 或是 原因是: 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:  ...

  2. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  3. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...

  4. vue中计算小数保留两位小数

    代码

  5. router-view组件在app.vue中渲染不出来怎么办

    1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...

  6. vue中v-for

    在vue中我们只要操作数据,就可以渲染和更新数据,这背后的boss就是diff算法 vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 1. 俩个相同组件产生类似DOM ...

  7. Vue中diff算法的理解

    Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...

  8. vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  9. vue中scoped vs css modules

    注意:此文是默认你已经具备scoped和css modules的相关基础知识,所以不做用法上的讲解. 在vue中,我们有两种方式可以定义css作用域,一种是scoped,另一种就是css module ...

随机推荐

  1. SpringCloud(一)之微服务核心组件Eureka(注册中心)的介绍和使用

    一 Eureka服务治理体系1.1 服务治理服务治理是微服务架构中最为核心和基础的模块,它主要用来实现各个微服务实例的自动化注册和发现. Spring Cloud Eureka是Spring Clou ...

  2. 【论文学习】A Fuzzy-Rule-Based Approach for Single Frame Super Resolution

    加尔各答印度统计研究所,作者: Pulak Purkait (pulak_r@isical.ac.in) 2013 年 代码:CodeForge.cn http://www.codeforge.cn/ ...

  3. partprobe 和 partx 的用法

    partprobe: 用于重读分区表,当出现删除文件后,出现仍然占用空间.可以partprobe在不重启的情况下重读分区. 将磁盘分区表变化信息通知内核,请求操作系统重新加载分区表. -d 不更新内核 ...

  4. nodejs的事件循环1

    JavaScript的学习零散而庞杂,因此很多时候我们学到了一些东西,但是却没办法感受到自己的进步,甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直试图在寻找一条核心 ...

  5. CetOS 服务不支持 chkconfig 的解决方法

    今天在添加Elasticsearch系统自动启动服务的时候,提示 “服务 elasticsearch 不支持 chkconfig ”,如下图: 后来查找了下原因,是脚本编写的不符合规范,缺少关键的前三 ...

  6. IIS 7 实现http跳转https 重定向方法

    官网的域名申请了一个SSL加密,导致原来的http无法访问了,网上找了一下解决方案,https://www.cnblogs.com/wer-ltm/p/10190535.html  按照这个方法进行了 ...

  7. 【转】java获取当前年、月、日 、小时 、分钟、 秒、 毫秒

    public class Test { /** * 英文简写(默认)如:2010-12-01 */ public static String FORMAT_SHORT = "yyyy-MM- ...

  8. python3速查参考- python基础 3 -> -> while循环实例 + Continue && break的应用 + 列表的初步学习

    while语句的应用 实例如下: """ 述求:用户登录系统,最多只能登录三次 第三次失败后,程序终止 """ user_table = { ...

  9. Python 清华镜像设置

    大家在通过pip 或conda 下载一些很大的第三方库时是不是有一种等到坟头的草都三尺高了,还没下载完的感觉,而且大的第三方库长时间下载,可能会导致超时自动中断下载,感谢清华的大佬们 临时使用: pi ...

  10. Cpython全局解释器锁原理剖析

    """In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple ...