Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

When I write MarkDown in <vue3-markdown-it></vue3-markdown-it> it is not working. #125

Open
otabekoff opened this issue Feb 22, 2021 · 3 comments
Labels
bug Something isn't working

Comments

@otabekoff
Copy link

Describe the bug
When I write MarkDown in it is not working.
But, when I use :source="source". It is displaying some of the markdown, but some of them are not working.

To Reproduce
Steps to reproduce the behavior:

  1. Create a Quasar framework(Vue) project.
  2. Include framework settings in boot file.
  3. Create a test page with some example.
  4. See error

Expected behavior
Using Markdown between tags.

Screenshots
No, screenshot!

Additional context
No additional context.

@otabekoff otabekoff added the bug Something isn't working label Feb 22, 2021
@JanGuillermo
Copy link
Owner

Hi @OtabekSadiridinov!

Can you elaborate more on which markdown functionality isn't working?

@Kruptein
Copy link

Kruptein commented Apr 27, 2021

The main issue being reported here is that you can't pass data along with slots; it has to be passed in via source which can be somewhat unwieldy in some cases

@lablnet
Copy link

lablnet commented Mar 12, 2022

Yes, it does not work, I solve the problem by making one component and wrap the data into that markdown component:

CustomMarkdown.vue

<template>
  <div>
    <span ref="markdownCode">
      <slot></slot>
    </span>
    <Markdown :source="markdownCode" />
  </div>
</template>

<script lang="js">

import Markdown from 'vue3-markdown-it';

export default {
    name: "CustomMarkdown",
    components: {
        Markdown,
    },
    data () {
        return {
            markdownCode: ""
        }
    },
    mounted() {
        let elem = this.$refs.markdownCode
        this.markdownCode = elem.textContent;
        elem.remove();
    }
}
</script>

And I can use that component anywhere like.

<template>
      <vue-markdown># this is the default slot</vue-markdown>
</template>

<script lang="js">
import CustomMarkdown from '@/components/CustomMarkdown';

export default {
      name: "Post",
      components: {
          'vue-markdown': CustomMarkdown,
      },
}

That's all.

But it will be good if that component support that functionality out of the box.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
Status: No status
Development

No branches or pull requests

4 participants