Tablodaki Vue şablon bileşeninde yer alan tabloyu doldurun api

Question

Bir tabloyu doldurmak için dinlenme (api kullanarak) veri almaya çalıştığım bir Vue bileşenim var. Geri kalan arama, kromda geçerli bir json dizgisi döndürür. Ancak, tablodaki şablonu doldurmak için bunu alamıyorum. Ben görünümü çalıştırdığınızda, ben dinlenme görüşmesinde aşağıdaki hatayı alıyorum:

<template> 
    <div class="course-list-row"> 
    <tr v-for="course in courses"> 
     <td>{{ course.CourseId }}</td> 
     <td>{{ course.AuthorId }}</td> 
     <td>{{ course.Title }}</td> 
     <td>{{ course.CourseLength }}</td> 
     <td>{{ course.Category }}</td> 
    </tr> 
    </div> 
</template> 

<script> 
    import axios from 'axios' 
    export default { 
    name: 'course-list-row', 
    mounted: function() { 
     this.getCourses() 
     console.log('mounted: got here') 
    }, 
    data: function() { 
     return { 
     message: 'Course List Row', 
     courses: [] 
     } 
    }, 
    methods: { 
     getCourses: function() { 
     const url = 'https://server/CoursesWebApi/api/courses/' 
     axios.get(url, { 
      dataType: 'json', 
      headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
      }, 
      mode: 'no-cors', 
      credentials: 'include' 
     }) 
     .then(function (response) { 
      console.log(JSON.stringify(response.data)) 
      this.courses = JSON.stringify(response.data) 
     }) 
     .catch(function (error) { 
      console.log(error) 
     }) 
     } 
    } 
    } 
</script> 

: Burada

[{"CourseId":"architecture","AuthorId":"cory-house","Title":"Architecting Applications","CourseLength":"4:20","Category":"Software Architecture Test"}]

benim şablon: Burada

TypeError: Cannot set property 'courses' of undefined

iade edilen json olduğunu Düzenleme:

Bu, "this" karakterinin api ca'sında görünür. Geri bildirim işlevi tanımlanmamış. Eğer düzenledikten olarak

Answer 1

, doğru hata var, bu kapsamı axios.get içine değişti, aşağıdaki değişiklikleri yapmanız gerekir: Bu

methods: { 
    getCourses: function() { 
    var self = this 
    const url = 'https://server/CoursesWebApi/api/courses/' 
    axios.get(url, { 
     dataType: 'json', 
     headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
     }, 
     mode: 'no-cors', 
     credentials: 'include' 
    }) 
    .then(function (response) { 
     console.log(JSON.stringify(response.data)) 
     self.courses = response.data 
    }) 
    .catch(function (error) { 
     console.log(error) 
    }) 
    } 
}