Блог

Я создаю веб-сайт электронного обучения, где есть карточки курсов, которые вы можете выбрать. Вот мои коды

 <template>
<div>
  <v-container>
      <v-row>
          <v-col md="3" offset-lg="1">
              <Categories />
          </v-col>
          <v-col md="9" lg="7">
              <CourseList v-bind:list="list"/>
          </v-col>
      </v-row>
  </v-container>
</div>
</template>

<script>
import CourseList from '@/components/courses/CourseList.vue'
import Categories from '@/components/courses/Categories.vue'
import axios from 'axios'


export default {
  components: {
    CourseList,
    Categories
  },
  data() {
         return {
            list: []
         }
  },
  mounted: function() {
            axios
                .get('https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course')
                .then(res => this.list = res.body)
                .catch(err => console.log(err))
        }
}
</script>
 

CourseList.vue

 <template>
  <div>
      <h2>Courses</h2>

      <v-row>
          <v-col sm="6" md="4">
              <VerticalCard v-bind:list="list"/>
              
          </v-col>
      </v-row>
      
  </div>
</template>

<script>
import VerticalCard from '@/components/cards/VerticalCard.vue'

export default {
    name: "CourseList",
    components: {
        VerticalCard
    },
    props: ["list"]
}
</script>
 

Моя проблема в том, что я не смог получить данные из API link ->
https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course

Интересно, что я делаю не так? Я также пытался использовать {{list}} для получения данных, но это не сработало. Моя цель прямо сейчас — получить все данные, даже если это будет выглядеть неаккуратно. Извините за мой плохой английский и спасибо!

axios переносит данные в объект данных, поэтому вместо .then(res => this.list = res.body) него должно быть .then(res => this.list = res.data.body)

каждый ответ на данные, запрошенный axios, будет заключен в data object, поэтому вам нужно получить данные тела data.body . вы можете проверить с помощью console.log(res)

 const uri = 'https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course'
axios
  .get(uri)
  .then(res => {
    console.log(res)
    let {data: {statusCode, body}} = res
    if(statusCode == 200)
      this.list = [...body]
  })
  .catch(err => console.log(err))