So, I'm working on retrieving data from an API using vue.js and axios. In my app.vue file, I import a component called Contests where I make the API call. Even though I can retrieve the data, it's rendering as HTML when displayed in my final screen component. Any ideas on how to fix this issue? Below is the code snippet:
<template>
<div>
<app-contests> </app-contests>
</div>
</template>
<script>
import Contests from './components/Contests.vue';
export default {
components: {
appContests: Contests
}
}
</script>
<style>
</style>
This is where I am attempting to fetch the data:
<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>