从 rest api 填充 Vue 模板组件中的表 [英] Populate table in Vue template component from rest api

问题描述

我有一个 Vue 组件，我试图在其中获取 rest api(使用 axios)数据来填充表格.其余调用在 chrome 中返回一个有效的 json 字符串.但是，我无法让它填充模板中的表格.当我运行视图时，我在 rest 调用中收到以下错误:

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: 无法设置未定义的属性课程"

TypeError: Cannot set property 'courses' of undefined

这是返回的 json:

Here is the json being returned:

[{"CourseId":"architecture","AuthorId":"cory-house","Title":"Architecting应用程序","CourseLength":"4:20","Category":"软件架构测试"}]

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

这是我的模板:

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

api回调函数中this.courses的this"好像是未定义的.

It appears the "this" of this.courses in the api callback function is undefined.

推荐答案

你已经编辑了，你得到了正确的错误，这个范围在 axios.get 里面已经改变了，你需要做以下更改:

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