javascript - Getting HTML from API in Vue.js - Stack Overflow

admin管理员组

文章数量:1333159

So, I have an API I need to retrieve data from. I'm using vue.js and axios. I have an app.vue file in which i import a ponent called Contests, in contests i'm making the api call, I'm able to retrieve the data whatsoever but it's HTML, and when I put it inside my ponent on the final screen it only shows HTML,anyone has any ideea? this is my code App ponent here

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

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

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

<style>

</style>

where i'm making the api call

<template>
    <div>
        <div class="container">
            {{info}} 
        </div>
        <div v-if="errored">
            <h1>We're sorry, we cannot retrieve this information at the moment. Please e 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>

So, I have an API I need to retrieve data from. I'm using vue.js and axios. I have an app.vue file in which i import a ponent called Contests, in contests i'm making the api call, I'm able to retrieve the data whatsoever but it's HTML, and when I put it inside my ponent on the final screen it only shows HTML,anyone has any ideea? this is my code App ponent here

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

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

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

<style>

</style>

where i'm making the api call

<template>
    <div>
        <div class="container">
            {{info}} 
        </div>
        <div v-if="errored">
            <h1>We're sorry, we cannot retrieve this information at the moment. Please e 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>

• javascript
• vue.js

Share Improve this question Follow asked Oct 19, 2018 at 8:19 Chris XChris X 2311 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Since your response data is an HTML content, you need to use an appropriate handler to render that in DOM. Vue.js provide v-html attribute to add HTML in DOM.

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

But be careful with it because it can lead to XSS attack - https://blog.sqreen.io/xss-in-vue-js/

本文标签： javascriptGetting HTML from API in VuejsStack Overflow