微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决在 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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。