如何解决在 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 举报,一经查实,本站将立刻删除。