使用v-html的时候没法显示目录 about vue-side-catalog

[jacky-09]

@yaowei9363 大佬，我在我的codesandbox里面改成这样是没有问题的，但是换到我自己前后端分离的地方就不行了，大佬能否帮我看看（实在没法放codesandbox）。
代码：

<template>
<div id="app">
    <div v-if="article.course"><h1>{{ article.course }}:{{ article.title }}</h1></div>
    <div v-else><h1>{{ article.title }}</h1></div>
    <br><br>
    <div id="article" align="left" v-html="articlebody"></div>
    <!--永远无法显示的目录-->
    <side-catalog v-if="show" class="catalog" v-bind="catalogProps"></side-catalog>
</div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import marked from 'marked';
import hljs from "highlight.js";
import 'highlight.js/styles/atom-one-light.css'
import axios from 'axios';
import SideCatalog from "vue-side-catalog";
import "vue-side-catalog/lib/vue-side-catalog.css";

export default {
    name: 'ArticleDetail',
    components: {
        SideCatalog,
    },
    data () {
        return {
            article: '',
            articlebody: '',
            catalogProps: {
                container: "#article",
                watch: true,
                height: "calc(100% - 100px)",
            }
        }
    },
    methods: {
        getArticle () {
            axios.get('http://127.0.0.1:8000/api/articles/' + this.$route.params.id)
            .then(this.getArticleSucc)
        },
        getArticleSucc (res) {
            this.article = res.data
            this.articlebody = res.data.body
            marked.setOptions({
            renderer: new marked.Renderer(),
            gfm: true,
            tables: true,
            breaks: false,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            highlight: function(code) {
                return hljs.highlightAuto(code).value;
            },
        })
            this.articlebody = marked(this.articlebody)
        },
    },
    mounted () {
        this.getArticle()
    },
}

</script>

<style scoped>
.catalog {
    position: fixed;
    top: 250px;
    right: 50px;
}
</style>

<style>
#article img {
    width: 90%;
    max-width: 100%;
    border-radius: 20px;
}
#article kbd {
    padding: .2rem .4rem;
    font-size: 87.5%;
    color: #fff;
    background-color: #212529;
    border-radius: .2rem;
}
</style>

这里确确实实是取到内容了，前面文章内容是正常显示的啊。

[jacky-09]

不好意思，我这里使用的是前后端分离的项目，所以项目涉及后端的内容（比如说api），没法创建codesandbox按照模板的要求重现

[yaowei9363]

请参考这个 #7 看是否能解决问题

[jacky-09]

博主，还是不行那。
代码：

<template>
<div id="app">
    <div v-if="article.course"><h1>{{ article.course }}:{{ article.title }}</h1></div>
    <div v-else><h1>{{ article.title }}</h1></div>
    <div id="article" align="left" v-html="articlebody"></div>
    <side-catalog class="catalog" v-bind="catalogProps"></side-catalog>
</div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import marked from 'marked';
import hljs from "highlight.js";
import 'highlight.js/styles/atom-one-light.css'
import axios from 'axios';
import SideCatalog from 'vue-side-catalog';
import 'vue-side-catalog/lib/vue-side-catalog.css'

export default {
    name: 'ArticleDetail',
    components: {
        SideCatalog,
    },
    data () {
        return {
            article: '',
            articlebody: '',
            catalogProps: {
                container: "#article",
                watch: true,
                height: "calc(100% - 100px)",
                title: "文章目录"
            }
        }
    },
    methods: {
        getArticle () {
            axios.get('http://127.0.0.1:8000/api/articles/' + this.$route.params.id)
            .then(this.getArticleSucc)
        },
        getArticleSucc (res) {
            this.article = res.data
            this.articlebody = res.data.body
            marked.setOptions({
            renderer: new marked.Renderer(),
            gfm: true,
            tables: true,
            breaks: false,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            highlight: function(code) {
                return hljs.highlightAuto(code).value;
            },
        })
            this.articlebody = marked(this.articlebody)
        },
    },
    mounted () {
        this.getArticle()
    },
}

</script>

<style>
.catalog {
    position: fixed;
    top: 250px;
    right: 50px;
}
</style>

但是还是没法显示出来，和原来一样。几乎已经和文档一样了，不知道什么情况，求大佬帮助。

[jacky-09]

@yaowei9363 求大佬帮忙看看

[jacky-09]

还有一个补充，在文件最前面不用v-html换上其他文本是可以正常显示的

[jacky-09]

非常感谢

[jacky-09]

我这里的还是不太一样，不能设定setTimeout的

[yaowei9363]

例子中的setTimeout 只是模拟异步请求，你可以把你marked.js解析过的文本替换例子中的vhtml看是否奏效。

[jacky-09]

好的，我再试试看

[jacky-09]

博主，我这里貌似已经把marked.js解析过的文本替换替换例子里面的vhtml了，现在还是不行的

[yaowei9363]

codesandbox地址提供一下

[jacky-09]

还是谢谢大佬了，这个不算必要功能，先算了吧

[jacky-09]

大佬，我把这个重现到codesandbox上面了，一开始是可以的，但是请大佬刷新一下右侧显示区，就可以发现只剩一个标题了。
codesandbox地址：https://codesandbox.io/s/thirsty-lamport-523rs?file=/src/App.vue

[jacky-09]

@yaowei9363 大佬可以帮忙看看吗

[yaowei9363]

你可以使用v-if在v-html的内容准备好后再渲染catalog 例子

[jacky-09]

实在找不出来有什么问题啊

[yaowei9363]

请仔细看完给的例子，show是在给articlebody赋值后置为true的

[jacky-09]

谢谢大佬，问题解决了