Sidebar: auto shows links for headings hidden by vue

[mattbrailsford]

• I confirm that this is a issue rather than a question.

Bug report

When using sidebar:auto sidebar links will be generated automatically from the headings in the markdown, however, if those headings are inside a vuejs code block that hides the section (ie, it has a v-if attribute to hide the contents based on a variable) the auto links are created regardless so you end up with links on the sidebar for content that isn't rendered to the page.

Version

0.x

Steps to reproduce

Create a page with frontmatter sidebar:auto and content of

## Some Heading 1

<div v-if="somVar">

## Some heading 2

</div>

<script>
export default {
    data() {
        return { someVar: false }
    }
}
</script>

What is expected?

Sidebar shouldn't show links for content that is hidden by vuejs

What is actually happening?

Sidebar shows links for all headings in the page whether they are visible or not

Other relevant information

• Your OS: Windows
• Node.js version: 8.x
• Browser version: Chrome latest
• Is this a global or local install? Local
• Which package manager did you use for the install? yarn

[ulivz]

Sidebar shouldn't show links for content that is hidden by vuejs

Hope you haven known the differences between build time and runtime. in VuePress, all the headers are extracted at build time, while your Vue.js code are running at runtime.

If you want to show a header dynamically, I suggest you to write HTML directly, so it will not be extracted by the internal markdown parser.