VueJs2 HTTP احصل على طلب من واجهة برمجة تطبيقات JSON

1

أنا أعمل على استرداد البيانات من واجهة برمجة تطبيقات JSON بواسطة VueJs 2. يمكنني استرداد البيانات من عنوان URL باستخدام الكود التالي.

المكون الخاص بي هو showGet. أنا أستخدم بيانات jsonplaceholder وهي تعمل بشكل جيد. ولكن عندما أعطي API المطلوب ( https://news.ontario.ca/newsroom/en.json ) ، فإنه لا يعمل. يعمل API هذا بشكل جيد في Postman. في المتصفح الخاص بي ، يتم عرض بيانات JSON. ولكن عندما أضع عنوان URL الخاص بي في Vue HTTP ، احصل على طلب لا يعمل.

لا تظهر حتى في 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>

1 إجابة

0

أنا لا أرى أي مشاكل في التعليمات البرمجية الخاصة بك

ربما أنت لا تشمل 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/[email protected]"></script>
<div id="app">
  <ul>
    <li v-for="blog in blogs">
      {{ blog.id }} - {{ blog.title }}
    </li>
  </ul>
</div>

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام