Accessing context/index of MDC
Hello,
I am wondering if I can somehow access a dynamic index/context/etc when inside a Markdown Component.
I am building an according FAQ section using radix-vue Accordion which I would like to populate with MDC like so:
::question
How do I pay?
#answer
You pay like this.
::
::question
How is VAT collected?
#answer
VAT is collected like this.
::
The problem is, radix-vue <Accordion> needs a dynamic value to key the items and set the default opened <AccordionItem>.
Something simple like ::question{:index=$doc.index} would therefore work just fine. Has someone implemented a similar feature?
Thanks for any pointers.
You can define a variable in front matter and use it in component props:
---
index
---
::question{:index="index"}
How do I pay?
#answer
You pay like this.
::
Unfortunately that won’t work. Such variable stays the same all across, I‘d need it to change dynamically per entry.
The best I could do is:
::question{index="1"}
How do I pay?
#answer
You pay like this.
::
::question{index="2"}
How is VAT collected?
#answer
VAT is collected like this.
::
That works but feels quite silly considering I have ~60 indices/entries to keep track of manually. Hence I was hoping there is some way to tap into $context for current entry and generate index (or literally any unique value) from that.
Somewhat related: how can I access the <ContentRendererMarkdown> data props inside .md files?
I was hoping to do something like:
Vue:
<ContentRenderer :value="doc" :data="{ showAccordion: true }" />
Markdown:
::question{:accordion="$doc.showAccordion"}
But that $doc.showAccordion is actually interpreted as raw String in <Question> component.
When I define it in front matter like this it works:
---
showAccordion: false
---
But obviously that defeats the purpose of rendering the same .md on multiple pages and controlling the .vue template via props.
Any help on how to pass dynamic props straight from Vue to MDC very appreciated.