从 Vue.js 中的 API 获取 HTML

Question

所以，我有一个 API 需要从中检索数据。我正在使用 vue.js 和 axios。我有一个 app.vue 文件，其中导入了一个名为 Contests 的组件，在竞赛中我进行 api 调用，我能够检索任何数据，但它是 HTML，当我将其放入最终的组件中时屏幕上只显示 HTML，有人有什么想法吗？这是我的代码应用程序组件

<template>
    <div>
        <app-contests> </app-contests>
    </div>
</template>

<script>
    import Contests from './components/Contests.vue';

    export default {
        components: {
            appContests: Contests
        }
    }
</script>

<style>

</style>

我在哪里进行 api 调用

<template>
    <div>
        <div class="container">
            {{info}} 
        </div>
        <div v-if="errored">
            <h1>We're sorry, we cannot retrieve this information at the moment. Please come back later.</h1>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                info: null
            }
        },
        mounted() {
            axios
              .get('myApiThatReturnsHtml')
              .then(response => {
                this.info = response;
              })
              .catch(error => {
                console.log(error);
                this.errored = true
              })
              .finally(() => this.loading = false)  
        }
    }

</script>

<style>

</style>

Answer 1

由于您的响应数据是 HTML 内容，因此您需要使用适当的处理程序在 DOM 中呈现它。Vue.js 提供了v-html在 DOM 中添加 HTML 的属性。

<div class="container" v-html="info">
</div>

但要小心，因为它可能导致 XSS 攻击 - https://blog.sqreen.io/xss-in-vue-js/