Question

我正在使用基于Vue-js的网站并使用JSON API显示数据。我使用 Axios 解析数据并将响应返回到我的视图。

我的JSON API包含一些HTML数据，包括嵌入要点，如下所示

<p>Some informative text here <br />  <script src="https://gist.github.com/nisat19/8e8e2c03ecbf198daef168948548d481.js"></script> </p>

在视图中，我尝试使用 v-html

渲染数据

<div v-html="content"></div>

它只成功解析HTML部分但不呈现要点。即

此处提供了一些信息性文字/ * Gist Script Missing * /

有没有办法解析脚本？

Answer 1

更新：根据建议和意见

在这里找到答案https://stackoverflow.com/a/44596352/3815630，可以看到v-html使用的InnerHtml不会执行脚本标记。

如果你愿意改变你的JSON Api，并让它发送gist id，那么我可以建议使用这个Vue插件在你的VueJs应用中嵌入Github gist。

https://www.npmjs.com/package/vue-embed-gist

您需要提供的只是gistId。

假设响应具有以下结构：

{
    "htmlData": "<p>Some informative text here <br /> more text </p>",
    "gistId": "8e8e2c03ecbf198daef168948548d481",
    "file": "example1.js"
}

你可以这样嵌入这个要点：

<template>
    <div>
        <div :v-html="htmlData"></div>
        <vue-embed-gist :gist-id="gistId" :file="file" />
    </div>
</template>

<script>
    import VueEmbedGist from 'vue-embed-gist'
    import axios from 'axios'
    export default {
        components: {
            VueEmbedGist
        },
        methods: {
            getServerData() {
                axios.get('your api url')
                    .then((response) => {
                        this.htmlData = response.htmlData,
                            this.gistId = response.gistId,
                            this.file = response.file
                    })
            }
        },
        data() {
            return {
                htmlData: '',
                gistId: '',
                file: ''
            }
        }
    }
</script>

PS：我创建了这个插件。

在Vue js中显示gist脚本

1 个答案: