MDC doesn't work if place in v-for

[Kevin-Ethiqais]

When I use <MDC :value="" /> it work but when I use it in a v-for like this, nothing is rendered :

  <div v-for="review in reviews" :key="review.id">
    <MDC :value="review.description" />
  </div>

Am I using MDC wrong?

[TheDogHusky]

I also have this issue:

<section
    v-if="content.length"
    v-for="theme of content"
    :key="theme.repoName"
    class="container min-h-screen"
    :class="theme.backgroundClass"
>

    <MDC
        :value="theme.markdown"
        class="markdown-content"
    />
    <Button
        size="lg"
        :href="`https://github.com/${theme.repoAuthor}/${theme.repoName}/releases/latest`"
        icon="solar:download-minimalistic-bold"
        target="_blank"
        variant="primary">
        Download {{ theme.repoName }}
    </Button>
</section>

nothing is rendered, and in the DOM I see a <!-- v-if -->

[TheDogHusky]

Hey @Kevin-Ethiqais I fixed this issue myself by parsing the markdown before and use MDCRenderer instead of MDC.
Here is the updated code:

<script setup lang="ts">
import { parseMarkdown } from "@nuxtjs/mdc/runtime";
import type { MDCParserResult } from "@nuxtjs/mdc/module";

// <...>

const fetchContent = async () => {
    content.value = [];
    for (const theme of themes) {
        const { markdown, repoName, repoAuthor, backgroundClass } = extractInformation(theme);
        try {
            const markdownContent = await getMarkdownContent(markdown);
            // Parse the markdown content to HTML
            const parsedContent = await parseMarkdown(markdownContent); // here!
            content.value.push({ markdown: parsedContent, repoName, backgroundClass, repoAuthor });
        } catch (error) {
            console.error(`Error fetching content for ${repoName}:`, error);
        }
    }
};

// <...>

</script>
<template>
    <section
        v-if="content.length"
        v-for="theme of content"
        :key="theme.repoName"
        class="container min-h-screen"
        :class="theme.backgroundClass"
    >
        <MDCRenderer
            :body="theme.markdown.body"
            :data="theme.markdown.data"
            class="markdown-content"
        />
        <Button
            size="lg"
            :href="`https://github.com/${theme.repoAuthor}/${theme.repoName}/releases/latest`"
            icon="solar:download-minimalistic-bold"
            target="_blank"
            variant="primary">
            Download {{ theme.repoName }}
        </Button>
    </section>

it works for me.

[Kevin-Ethiqais]

Thanks, I wanted to test this workaround but I couldn't because of this problem when I imported parseMarkdown : #391

[TheDogHusky]

A workaround on the debug issue had been posted a while ago. It works like a charm: #391 (comment)

[Kevin-Ethiqais]

Honestly, I don't think this is a good solution. Personally, I preferred to use Milkdown (which I already used as an editor) in read-only mode instead of this library, which seems to be a bit inactive.

[toniengelhardt]

@Kevin-Ethiqais not sure if that is also related to this problem, but I had to set a cache key to make the <MDC /> component work in a list like so:

<MDC :cache-key="`mdc-${uniqueKey}`" :value="content" />

[Kevin-Ethiqais]

I don't remember if I tried this, but it sounds familiar. I think I tried it with the index of the v-for, but it didn't work (I'm not sure at all)