1

the markdown file link: http://127.0.0.1:8000/media/uploads/content/test_y4O7oOS.md

vue template:

<template>
  <div>
      {{ artilce.title }}
      {{ artilce.description }}
      {{ artilce.get_content_file }}
      
  </div>
</template>

vue methods:

methods: {
        async getArticleDetail() {
            const category_slug = this.$route.params.category_slug
            const article_slug = this.$route.params.article_slug

            await axios
                .get(`/api/${category_slug}/${article_slug}/`)
                .then(response => {
                    this.artilce = response.data
                    document.title = this.artilce.title
                })
                .catch(err => {
                    console.log(err)
                })
        }
    }
i Osama
  • 17
  • 4

1 Answers1

1

fix it, or not!!!

<template>
  <div>
      {{ artilce.get_content_file }}
      <VueShowdown 
        :markdown= "content"
        flavor="github"
        :options="{ emoji: true }"/>
  </div>
</template>

<script>
import axios from 'axios'
import { VueShowdown } from 'vue-showdown'
export default {
    name: 'Article Detail',
    data() {
        return {
            artilce: {},
            content: ''
        }
    },
    components: {
        VueShowdown
    },

    mounted() {
        this.getArticleDetail()
    },

    methods: {
        async getArticleDetail() {
            const category_slug = this.$route.params.category_slug
            const article_slug = this.$route.params.article_slug

            await axios
                .get(`/api/${category_slug}/${article_slug}/`)
                .then(response => {
                    this.artilce = response.data
                    document.title = this.artilce.title
                    this.getContent()
                })
                .catch(err => {
                    console.log(err)
                })
        },
        async getContent() {
            await axios
                .get(`${this.artilce.get_content_file}`)
                .then(response => {
                    this.content = response.data
                })
        }
    }
}
</script>

<style>

</style>
i Osama
  • 17
  • 4
  • this seems a good answer, using a thin wrapper around https://github.com/showdownjs/showdown parser. Another good choice is [marked](https://github.com/markedjs/marked), if performance is really really important. – roberto tomás Jul 18 '21 at 23:39
  • I will give it a try, is vueshowdown is performance beast? or the way I code my solution? – i Osama Jul 20 '21 at 17:07