（vue）$nextTick() 获取的DOM类数组取值有问题，转为数组是空数组

zhaohanqq 2019-01-10 05:17:00

```
mounted() {
this.$nextTick(this.init);
},
methods: {
init() {
let imgDomList = document.getElementsByTagName('img');
Array.prototype.slice.call(imgDomList,0).forEach((img, index) => {
......................
})
})
}
}
```
问题出现了：打印imgDomList的值没问题，但是imgDomList.length 为0，imgDomList[0]为undefined，实际上是有值的，当然转为数组也是空数组[]。
最后不得已用了setTimeout(this.init, 1000)，请问为什么会出现上面的问题，谢谢！

...全文

809 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhaohanqq 2019-01-12

打赏
举报

引用 9 楼讨厌走开啦的回复:

init要操作的dom是在promise.then执行了以后才生成吧？

是的

讨厌走开啦 2019-01-12

打赏
举报

init要操作的dom是在promise.then执行了以后才生成吧？

zhaohanqq 2019-01-12

打赏
举报

引用 7 楼讨厌走开啦的回复:

[quote=引用 6 楼 zhaohanqq 的回复:]
[quote=引用 5 楼讨厌走开啦的回复:]
[quote=引用 4 楼 zhaohanqq 的回复:]
[quote=引用 3 楼 scscms太阳光的回复:]
应该是dom节点还没生成，你要确保影响dom节点的数据是否已经确定并生成dom

this.$nextTick()的作用不就是在DOM更新完成后再执行吗，而且结果里面已经有两个img对象了[/quote]

你理解错了，初始的时候确实HTMLCollection是空的，只是当你点展开的时候，HTMLCollection已经不是空的了，所以就导致你看到的HTMLCollection长度为0，但是展开却有元素。这是因为当你展开HTMLCollection的时候，HTMLCollection的数组长度没有被刷新。[/quote]

谢谢您的回复，我明白为什么会出现这种情况了，但是还有疑点是，this.$nextTick()的作用不就是在DOM更新完成后再执行吗，为什么HTMLCollection长度为0[/quote]

那要看dom的变更是否在VUE的监控范围内，比如你用原生js去操作dom，VUE是无法感知的。[/quote]

引用 7 楼讨厌走开啦的回复:

[quote=引用 6 楼 zhaohanqq 的回复:]
[quote=引用 5 楼讨厌走开啦的回复:]
[quote=引用 4 楼 zhaohanqq 的回复:]
[quote=引用 3 楼 scscms太阳光的回复:]
应该是dom节点还没生成，你要确保影响dom节点的数据是否已经确定并生成dom

<template>

  <div class="article-box">

    <div class="title">{{title}}</div>

    <div v-html="htmls"></div>

    <ToolBar />

  </div>

</template>

mounted() {

    this.docEntry = this.$route.query.docEntry;

    this.classify = this.$route.query.classify;

    let formdata = new FormData();

    formdata.append("action", "ReceiveDetail");

    formdata.append("docEntry", this.docEntry);

    formdata.append("classify", this.classify);

    formdata.append("userCode", localStorage.getItem("UserCode"));

    this.$store

      .dispatch("receiveDetail", formdata)

      .then(res => {

        this.htmls = res[0].U_ContentHtml;

        this.title = res[0].U_Title;

      })

      .catch(err => this.$toast(err, "error"));

    setTimeout(this.init, 1000);

    // this.$nextTick(this.init)

  },

一是我没有用原生的js操作DOM，二是我觉得这么操作应该在vue监听范围内吧（平常也都是这么操作的呀）
谢谢啦，回头把分都给你

讨厌走开啦 2019-01-12

打赏
举报

引用 6 楼 zhaohanqq 的回复:

[quote=引用 5 楼讨厌走开啦的回复:] [quote=引用 4 楼 zhaohanqq 的回复:] [quote=引用 3 楼 scscms太阳光的回复:] 应该是dom节点还没生成，你要确保影响dom节点的数据是否已经确定并生成dom

this.$nextTick()的作用不就是在DOM更新完成后再执行吗，而且结果里面已经有两个img对象了[/quote] 你理解错了，初始的时候确实HTMLCollection是空的，只是当你点展开的时候，HTMLCollection已经不是空的了，所以就导致你看到的HTMLCollection长度为0，但是展开却有元素。这是因为当你展开HTMLCollection的时候，HTMLCollection的数组长度没有被刷新。[/quote] 谢谢您的回复，我明白为什么会出现这种情况了，但是还有疑点是，this.$nextTick()的作用不就是在DOM更新完成后再执行吗，为什么HTMLCollection长度为0[/quote] 那要看dom的变更是否在VUE的监控范围内，比如你用原生js去操作dom，VUE是无法感知的。

讨厌走开啦 2019-01-12