JSON API的VueJs2 HTTP获取请求

Question

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

我的组件是showGet。 我正在使用jsonplaceholder数据，并且工作正常。 但是，当我提供所需的API（ https://news.ontario.ca/newsroom/en.json ）时，它不起作用。 该API在Postman中可以很好地工作。 在我的浏览器中，它显示JSON数据。 但是，每当我将URL放入Vue HTTP get请求中时，它都不会起作用。

它甚至没有显示在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>