title: VueJs2 HTTP Get Request from JSON API
body: <p>I am working on retrieving data from a JSON API by VueJs 2. I can retrieve data from the URL using the following code.</p>
  
  <p>My component is showGet. I am using jsonplaceholder data and it's working fine.
  But when I give my desired API (<a href="https://news.ontario.ca/newsroom/en.json" rel="nofollow noreferrer">https://news.ontario.ca/newsroom/en.json</a>) it does not work. This API works nicely in Postman. In my browser it's showing JSON data.
  But whenever I put my URL in Vue HTTP get request it does not work. </p>
  
  <p>It's not even showing in <code>console.log(data)</code>.</p>
  
  <pre><code>&lt;script&gt;
  
  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);
        })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My App.vue code is below:</p>
  
  <pre><code>&lt;script&gt;
  
  import showGet from './components/showGet'
  
  export default {
    name: 'App',
    components: {
      showGet
    },
    data(){
      return{
  
      }
    },
    methods:{
  
    }
  }
  &lt;/script&gt;
  </code></pre>