VueJs2 HTTP从JSON API获取请求

Question

我正在通过VueJs 2从JSON API中检索数据。我可以使用以下代码从URL中检索数据。

我的组件是showGet。我正在使用jsonplaceholder数据，它运行良好。但当我给出我想要的API时(https://news.ontario.ca/newsroom/en.json)它不起作用。这个API在Postman中运行良好。在我的浏览器中，它显示JSON数据。但每当我把我的URL放在VueHTTPget请求中时，它都不起作用。

它甚至没有显示在console.log(data)中。

<script>
export default {
data(){
return{
blogs:[]
}
},
methods:{
},
created(){
this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data){
console.log(data);
this.blogs= data.body.slice(0,10);
})
}
}
</script>

我的App.vue代码如下：

<script>
import showGet from './components/showGet'
export default {
name: 'App',
components: {
showGet
},
data(){
return{
}
},
methods:{
}
}
</script>

Answer 1

我在您的代码中没有看到任何问题

也许您没有包括vue-resource(需要使用this.$http(

new Vue({
el: '#app',
data() {
return {
blogs: []
}
},
methods: {
},
created() {
this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data) {
//console.log(data);
this.blogs = data.body.slice(0, 10);
})
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<div id="app">
<ul>
<li v-for="blog in blogs">
{{ blog.id }} - {{ blog.title }}
</li>
</ul>
</div>