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>

JSON API的VueJs2 HTTP获取请求

1 个答案: