读取HTMLCollection列表的length为0

二维码打包的时候 需要for循环一直显示domCls为空，但是又能打印出domCls

downloadZip 方法里添加定时器

 <!-- 二维码 -->
<div id="ziptable" style="visibility:hidden;">
  <Qrcode
    :qrUrl="item.qrCode"
    :qrText="item.typeTranslation"
    v-for="item in qrCodelist"
    :key="item.type"
  ></Qrcode>
</div>

//methods里调用接口

downloadcode(row) {
  getVerificationCode(this.$qs.stringify({ memberId: row.id })).then(
    res => {
      if (res.code == 200) {
        this.qrCodelist = res.result;
        this.downloadZip();
      }
    }
  );
},

// 压缩并下载二维码

downloadZip() {
  setTimeout(() => {
    let dom = [];
    let domCls = document
      .getElementById("ziptable")
      .getElementsByClassName("qrcode_box");
    console.log(domCls, domCls.length);
    for (let index = 0; index < domCls.length; index++) {
      dom.push(domCls[index].getElementsByClassName("canvas")[0]);
    }
    let zip = new JSZip();
    let img = zip.folder("");
    for (let index = 0; index < dom.length; index++) {
      img.file(
        `${this.qrCodelist[index].typeTranslation}${this.qrCodelist[index].qrCode}.png`,
        dom[index]
          .toDataURL("img/png")
          .substring(dom[index].toDataURL("img/png").indexOf(",") + 1),
        { base64: true }
      );
    }
    // 图片是base64格式, 但不要base64前缀;
    zip.generateAsync({ type: "blob" }).then(function(content) {
      FileSaver.saveAs(content, "投递码.zip");
    });
  }, 200);
},

 上网查阅发现问题可能是由于mounted 不会承诺所有的子组件也都一起被挂载。

这个时候dom元素还有没挂载完毕。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted () {
  this.$nextTick(() => {

  })
},

但是不清楚为什么使用了这个方法后获取的length依旧为0。

问题

在mounted阶段，获取Element对象，console.log()可以读取出列表，而却无法读出它的length。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted: function () {
 this.$nextTick(function () {
  // Code that will run only after the
  // entire view has been rendered
 })
}