从rest api填充Vue模板组件中的表格 [英] Populate table in Vue template component from rest api
问题描述
我有一个 Vue 组件，我试图在其中获取 rest api(使用 axios)数据来填充表.其余调用在 chrome 中返回一个有效的 json 字符串.但是，我无法让它填充模板中的表格.当我运行视图时，我在 rest 调用中收到以下错误:
<块引用>类型错误:无法设置未定义的属性课程"
这是返回的json:
<块引用>[{"CourseId":"architecture","AuthorId":"cory-house","Title":"ArchitectingApplications","CourseLength":"4:20","Category":"软件架构测试"}]
这是我的模板:
<div class="course-list-row"><tr v-for="课程中的课程"><td>{{ course.CourseId }}</td><td>{{ course.AuthorId }}</td><td>{{ course.Title }}</td><td>{{ course.CourseLength }}</td><td>{{ course.Category }}</td></tr><脚本>从 'axios' 导入 axios导出默认{name: '课程列表-行',挂载:函数(){this.getCourses()console.log('mounted: got here')},数据:函数(){返回 {message: '课程列表行',培训班: []}},方法: {获取课程:函数(){const url = 'https://server/CoursesWebApi/api/courses/'axios.get(网址，{数据类型:'json'，标题:{'接受':'应用程序/json'，'内容类型':'应用程序/json'},模式:'no-cors'，凭据:'包括'}).then(功能(响应){console.log(JSON.stringify(response.data))this.courses = JSON.stringify(response.data)}).catch(函数(错误){控制台日志(错误)})}}}
api回调函数中this.courses的this"似乎是未定义的.
在你编辑的时候，你得到了正确的错误，这个范围在 axios.get 里面已经改变了，你需要做以下变化:
方法:{获取课程:函数(){var self = thisconst url = 'https://server/CoursesWebApi/api/courses/'axios.get(网址，{数据类型:'json'，标题:{'接受':'应用程序/json'，'内容类型':'应用程序/json'},模式:'no-cors'，凭据:'包括'}).then(功能(响应){console.log(JSON.stringify(response.data))self.courses = response.data}).catch(函数(错误){控制台日志(错误)})}}I have a Vue component where I am trying to get rest api (using axios) data to populate a table. The rest call returns a valid json string in chrome. However, I can't get it to populate the table in the template. When I run the view, I get the following error in the rest call:
TypeError: Cannot set property 'courses' of undefined
Here is the json being returned:
[{"CourseId":"architecture","AuthorId":"cory-house","Title":"Architecting Applications","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 appears the "this" of this.courses in the api callback function is undefined.
as you have edited, you have got the correct error, scope of this has changed inside axios.get, you need to make 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)
})
}
}
这篇关于从rest api填充Vue模板组件中的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
