<div id="app">
<h1> Latest News </h1>
<div v-for="CurArticle in articles">
<div id="title">
<h2>{{CurArticle.title}}</h2>
</div>
<div id="content">
<p>{{CurArticle.content}}</p>
</div>
</div>
</div>
<script>
const API_KEY = "XXXXXXXXXX";
const url = "https://newsapi.org/v1/articles?";
const app = new Vue({
el: '#app',
data:{
articles: [{
title:"News Title", content: "Lorem Ipsum"
}]
},
mounted(){
axios.get("https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=XXXXXXXXXXX").then(function(reply){
this.articles = reply.data.articles;
//app.$set(this.news, response.data.articles);
console.log(reply.data.articles);
}).catch(function(error){
console.log(error);
})
}
});
</script>
The data does not populate correctly. Additionally, every time I attempt to view the data/response object via the console, I encounter an error stating "Reference Error: data/reply is not defined". The AJAX call operates without any issues.