在 vuejs 中显示 markdown 文件markdown 通过后端链接提供

问题描述

markdown 文件链接： http://127.0.0.1:8000/media/uploads/content/test_y4O7oOS.md

vue 模板：

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

vue 方法：

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)
                })
        }
    }

解决方法

修复它，或者不修复它！！！

<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>