javascript - 在 vuejs 中显示降价文件（通过后端链接提供降价）

Question

降价文件链接： 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)
                })
        }
    }

Answer 1

修不修！！！

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