导航栏问题，点击目录滚动后，多次切换文档操作会导致目录内容不更新

[tianciyinji]

Describe the issue

改成用index，点击左边切换文档，然后点击右边跳转标题随便点几个，然后再点击左边切换文档，就会出现右边导航卡死是之前文档内容的导航了，没有更新导航列表呢。大佬可以试试看。

代码：

<style> .cinemas{ width: 100%; height: 100%; padding-top: 50px; background-color: aquamarine; display: flex; } .list{ width: 200px; height: 100vh; } ul li{ padding: 10px 10px; cursor: pointer; } .md{ height: 400px; overflow: auto ; } </style>
<template> <div class="cinemas"> <div class="list"> <ul> <li @click="switchDoc(1)">文档1</li> <li @click="switchDoc(2)">文档2</li> <li @click="switchDoc(3)">文档3</li> </ul> </div> <MdPreview class="md" ref="previewRef" :mdHeadingId="mdHeadingId"  :editorId="id" :modelValue="text" /> <MdCatalog  :mdHeadingId="mdHeadingId"  :editorId="id" :scrollElement="scrollElement" /> </div> </template>

<script setup> import { ref,onMounted } from 'vue'; import { MdPreview, MdCatalog } from 'md-editor-v3'; import 'md-editor-v3/lib/preview.css'; const id = 'preview-only'; const text = ref('# Hello Editor'); const scrollElement = ref(null); const previewRef = ref(); const mdHeadingId = (_text, _level, index) => `heading-${index}`; const switchDoc = (val)=>{ text.value = docs[ `doc${val}`] } onMounted(()=>{ text.value = docs.doc1 // scrollElement.value = previewRef.value.$el; scrollElement.value = document.querySelector('.md'); }) // 文档内容 const docs = { "doc1":` # 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档1 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` `, "doc2":` # 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` #### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ## 文档2 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ### 示例代码 \`\`\`JSON asdlkajsldkjsaldasasdasdasfaf asdasflkasjfklafaa afklajljsdjalshjf afafasffadfhdfhfd hdfhfdhdfhd hdfhdfhdfhd eryeryeryeryeryeryery yeryeryeryeqwerqwrqwr uiyiouyiyuuyiyuiyu \`\`\` ` , "doc3": `## 常用命令 **初始化本地仓库：**\`git init\` **本地仓库关联远程仓库：**\`git remote add origin "git 地址"\` **查看已关联的仓库：**\`git remote -v\` **切换关联仓库**（如想要从HTTPS方式的关联仓库切换到SSH方式关联的仓库）： （1）、取消关联：\`git remote remove origin\` （2）、重新关联：\`git remote add origin "git SSH方式的地址"\` **查看所有的分支：**\`git branch -a\` **更新分支列表**（当你不能查看到完整的分支列表时）：\`git fetch\` **切换分支：**\`git checkout 分支名\` **创建分支：**\`git branch 分支名\` **强制删除分支**（可删除当前分支）：\`git branch-D 分支名\` **非强制删除分支**（不可删除当前分支）：\`git branch -d 分支名\` **创建并切换到新分支：**\`git checkout -b 分支名\` **克隆远程仓库的项目代码：**\`git clone "远程仓库地址"\` **克隆远程仓库指定分支的代码：**\`git clone "远程仓库地址"\` **拉取远程分支：**\`git pull 远程分支\` **提交变更到本地仓库：**\`git commit -m "修改信息注释"\` **将你的分支推到远程仓库：**\`git push origin 本地分支名:远程分支名\` \`\`\`bash // 例如将本地的 master 推送到远程的 master git push origin master:master \`\`\` **合并分支代码：** 例如将\`main\`分支合并到\`master\`分支，按照以下步骤操作： 1. 确保你当前位于\`master\`分支上：使用命令 \`git checkout master\` 切换到\`master\`分支。 2. 拉取最新代码：使用命令 \`git pull origin master\` 拉取远程仓库的\`master\`分支代码，以确保你本地的\`master\`分支是最新的。 3. 合并\`main\`分支：使用命令 \`git merge main\` 将\`main\`分支的代码合并到当前的\`master\`分支上。 4. 解决冲突：如果在合并过程中出现冲突，需要**手动解决冲突**。Git会标记出冲突的文件，你需要打开这些文件并手动选择要保留的代码。完成解决冲突后，保存文件。 5. 提交更改：先 \`add\` 添加更改后，使用命令 \`git commit -m "Merge main into master"\` 提交合并后的更改。确保提交信息清晰明了，说明你是将\`main\`分支合并到了\`master\`分支。 6. 推送更改：使用命令 \`git push origin master\` 将本地的\`master\`分支推送到远程仓库的\`master\`分支上。 **撤销本地commit:** （1）、\`git log\` 查看 commit_id （2）、\`git reset --hard commit_id\` ———————————————— **回滚远程上一次操作：** 如果您想回滚远程仓库的上一次操作，可以使用以下命令： \`\`\` git revert HEAD \`\`\` 这将创建一个新的提交，撤消上一个提交所引入的更改。然后，您可以将这个新的提交推送到远程仓库： \`\`\` git push origin master \`\`\` 这样远程仓库就会包含撤消上一个提交的更改。 请注意，\`git revert\` 命令会在历史记录中创建一个新的提交来撤消之前的提交，而不是直接删除或修改历史记录。这是一种安全的方法，可以保留完整的历史记录，并且不会影响其他人正在进行的工作。 如果需要回滚更多次的提交，可以使用 \`git revert\` 命令并指定要回滚的提交的哈希值。 ## git 说明 工作区域 (参见：git帮助教程) clone 克隆一个仓库到一个新的目录 init 创建一个空的Git仓库或重新初始化一个已存在的仓库 处理当前的更改 (参见：git帮助日常使用) add 将文件内容添加到索引 mv 移动或重命名文件、目录或符号链接 restore 恢复工作树中的文件 rm 从工作树和索引中删除文件 查看历史和状态 (参见：git帮助修订版本) bisect 使用二分查找找到引入错误的提交 diff 显示提交之间的更改，提交和工作树等 grep 打印匹配模式的行 log 显示提交日志 show 显示不同类型的对象 status 显示工作树状态 扩展、标记和调整您的共同历史 branch 列出、创建或删除分支 commit 记录对仓库的更改 merge 将两个或多个开发历史记录合并在一起 rebase 在另一个基本版本的顶部重新应用提交 reset 将当前HEAD重置为指定的状态 switch 切换分支 tag 创建、列出、删除或验证使用GPG签名的标签对象 协作 (参见：git帮助工作流程) fetch 从另一个仓库下载对象和引用 pull 从另一个仓库或本地分支获取并合并 push 更新远程引用以及相关的对象` } </script>

Procedure version

最新版

Reproduction link

No response

[imzbf]

有没有能直接跑的代码

[tianciyinji]

那个是一个vue的简单页面 放在项目可以跑 如果要直接跑的话今晚我回去给您发一个 感谢回复 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: zbf ***@***.***> 发送时间: Monday, November 27, 2023 9:30:09 PM 收件人: imzbf/md-editor-v3 ***@***.***> 抄送: Liu ***@***.***>; Author ***@***.***> 主题: Re: [imzbf/md-editor-v3] 导航栏问题，大佬可以尝试一下，我不知道这是不是bug，还是因为渲染获取的问题 (Issue #397) 有没有能直接跑的代码 ― Reply to this email directly, view it on GitHub<#397 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A74OGQSX7AB2CESKJCCS5K3YGSIWDAVCNFSM6AAAAAA722267CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRXHAZTMOBTGA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[imzbf]

没发邮件？

[tianciyinji]

我直接在邮箱回复您的，我重新发个，感谢耐心。
demo.zip

[imzbf]

我直接在邮箱回复您的，我重新发个，感谢耐心。 demo.zip

收到，这看起来是组件内部的问题，这边标记了，感谢支持

[tianciyinji]

OK 感谢 有问题想请教一下 1.您的文档内容(markdown组件的内容)是咋实现语言切换的。 2.目录导航组件能不能配置显示几层目录呢，或者说我只要显示第一层 其余层点开之后才看得到。 😂我的需求就是这样子的，所以我只能自己手写一个这样的组件。 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: zbf ***@***.***> 发送时间: Thursday, November 30, 2023 10:10:56 AM 收件人: imzbf/md-editor-v3 ***@***.***> 抄送: Liu ***@***.***>; Author ***@***.***> 主题: Re: [imzbf/md-editor-v3] 导航栏问题，大佬可以尝试一下，我不知道这是不是bug，还是因为渲染获取的问题 (Issue #397) 我直接在邮箱回复您的，我重新发个，感谢耐心。 demo.zip<https://github.com/imzbf/md-editor-v3/files/13502479/demo.zip> 收到，这看起来是组件内部的问题，这边标记了，感谢支持 — Reply to this email directly, view it on GitHub<#397 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A74OGQWBV5E4V4R5NAHIGYDYG7TLBAVCNFSM6AAAAAA722267CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZSHE4TGNJTHA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[imzbf]

1. 语言很多方案，文档页很简单，就两份文档
2. 这类目录请通过onGetCatalog自行实现

[tianciyinji]

所以您是直接切换了另一份文档内容的？ OK 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: zbf ***@***.***> 发送时间: Friday, December 1, 2023 10:19:00 AM 收件人: imzbf/md-editor-v3 ***@***.***> 抄送: Liu ***@***.***>; Author ***@***.***> 主题: Re: [imzbf/md-editor-v3] 导航栏问题，点击目录滚动后，多次切换文档操作会导致目录内容不更新 (Issue #397) 1. 语言很多方案，文档页很简单，就两份文档 2. 这类目录请通过onGetCatalog自行实现 ― Reply to this email directly, view it on GitHub<#397 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A74OGQXNC3N7T3SH7HKCA7LYHE5BJAVCNFSM6AAAAAA722267CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZVGMYTMMBQGE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[imzbf]

问题在4.9.0中已修复，请更新后尝试

[tianciyinji]

👍 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: zbf ***@***.***> 发送时间: Friday, December 1, 2023 3:08:27 PM 收件人: imzbf/md-editor-v3 ***@***.***> 抄送: Liu ***@***.***>; Author ***@***.***> 主题: Re: [imzbf/md-editor-v3] 导航栏问题，点击目录滚动后，多次切换文档操作会导致目录内容不更新 (Issue #397) 问题在4.9.0中已修复，请更新后尝试 — Reply to this email directly, view it on GitHub<#397 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A74OGQV6GVRTH2W6FVQMB73YHF66XAVCNFSM6AAAAAA722267CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZVGU3TQMZTG4>. You are receiving this because you authored the thread.Message ID: ***@***.***>