How to pull data in context for a page in nuxt js?

Question

Vue.js

There is a request to yuoutub api

<script>
  import axios from 'axios'
  export default {
    asyncData () {
      return axios.get(`https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=50&key=AIzaSyBJy7U8AOb-7b7GH1NXW1vCXItADM`)
        .then((res) => {
          // return {videos: res.data.items}
          console.log(res.data)
        })
    }
  }
</script>

After the request, I rendered video previews and brought them to the main page in this way

<template>
<div class="container">
  <div class="list-items">
    <VideoPreview
      v-for = "video in videos"
      :key = "video.id"
      :id = "video.id"
      :title = "video.snippet.title"
      :thumbnailImage = "video.snippet.thumbnails.medium.url"
    />
  </div>
</div>
</template>

The question is how, in the context of this request, can I pull out the data for each video page?

Answer 1

I figured it out myself, I just had to write the request in the component like this:

<script>
  import axios from 'axios'
  export default {
    asyncData ({ params }) {
      return axios.get(`https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${params.id}&key=AIzaSyBJy7U8AOzPm7b7CXItADM`)
        .then((res) => {
          // return {videos: res.data.items}
          console.log(res.data)
        })
    }
  }
</script>

And then, upon request, the necessary information will come