Filling a table in Vue template component from rest api

Question

I have a Vue component where I am trying to get api information (using axios data) to populate a table. The second call returns a valid json string in chrome. However, I cannot get it to populate the table in the template. When I run the view, I get the following error on the rest of the call:

TypeError: Unable to set courses properties undefined

This returns json:

[{"CourseId": "Architecture", "AuthorID": "Cory-house", "Name": "Application Architecture Development", "CourseLength": "4:20", "Category": "Software Architecture Test" }]

Here is my template:

<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> 

Edit:

It looks like the "this" this.courses in the api callback function is undefined.

Answer 1

as you edited, you have the correct error, the volume of which has changed inside axios.get , you need to make the following changes:

 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) }) } }