vue 里 document.getElementById 无法获取 dom 怎么解决
FrankAdler 2024-03-15 16:49:56 +08:00 1740 次点击这是一个创建于 640 天前的主题，其中的信息可能已经有所发展或是发生改变。
自己搭了一个 audiobookshelf 服务听点有声读物，发现章节列表无法定位到当前章节，调试了一下找到问题了，但是作为一个后端，vue 实在是不熟，感觉这不到 100 行的代码里涉及很多 vue 知识点，一下子不知道如何修复。。
我看了下，大概是 27 行这里点击 LabelViewChapters
https://github.com/advplyr/audiobookshelf/blob/master/client/components/player/PlayerUi.vue#L27
弹出一个窗口，代码在这个文件
https://github.com/advplyr/audiobookshelf/blob/master/client/components/modals/ChaptersModal.vue#L71
然后调用 scrollToChapter 滚动到正在播放的章节，但是 document.getElementById 找不到当前章节的 dom ，导致逻辑停止，我在 this.$nextTick(this.scrollToChapter) 外面包一个 setTimeout 问题就解决了，所以问题还是出在查找前 dom 还没渲染出来的问题上？但是不知道如何不用setTimeout解决。
大家可以在这里讨论如何解决，也可以直接去提交 pr ，4.9K star 的项目还是很不错的，下次说不定你就可以拿$111 了。
8 条回复 2024-03-16 09:31:33 +08:00
 | 1 leokun 2024-03-15 17:13:49 +08:00  |
 | 2 FrankAdler OP @leokun 试了下好像不行，isReady 返回 true ，document.getElementById 还是 null |
 | 3 hevi 2024-03-15 18:09:39 +08:00 |
| 4 FrankAdler OP @hevi 看起来可以，不过这个项目的 chapters 是个对象数组，看起来要遍历查找，跟你的 demo 不太一样。 另外我也想知道现有的 dom 查找问题如何解决，感觉改动可能更小。 |
 | 5 relsoul 2024-03-15 18:31:03 +08:00 盲猜 modal 弹窗先渲染了，但是内部可能有一些逻辑做了一些处理，导致 modal 先出来，但是 container 没渲染出来。。 没时间搞环境 可以从 settimeout(func,0)开始试试。 |
| 6 FrankAdler OP @relsoul 就是不想用 settimeout 才发这个帖子 |
 | 7 hafuhafu 2024-03-16 09:23:12 +08:00 MutationObserver |
| 8 FrankAdler OP |
Select Language