'How to get data from API in vuejs?

I'm fetching Data from an API using Axios and i'm displaying them as Cards in a Component movie cards, the thing is that i want to be able to click on a single movie card and the router take me to another page(singlepage.vue) with that movie id from the API and displaying the movie specific data but the problem is that I do not any response from API and I get an message: "Content not found" status: -2
(I have to use the post method for request and put my post image below)

This is my API in postman

firstPage.vue : this is same component that i have movie cards.

<template>
   <div class="articles">
       <h2>featured articles</h2>
   </div>
   <div class="article-container">
       <div class="article-grid" v-for="data3 in datas3" :key="data3.ContentID" >
           <router-link :to="{name:'content', params:{id: data3.ContentID}}"  >
           <img :src="data3.LandscapeImage">
           <div class="article-title">
               <p>{{data3.Properties[5].Value}}</p>
               <h3>{{data3.Title}}</h3>
           </div>
           </router-link>
       </div>
   </div>
   

    <div class="number-container">
               <a class="previous" href="">&laquo; <span>previous</span></a>
               <a href="">1</a>
               <a href="">2</a>
               <a href="">3</a>
               <a href="">4</a>
               <a href="">...</a>
               <a href="">10</a>
            <a class="next" href="#"> <span>next</span> &raquo;</a>
       </div>

</template>

<script>

export default {
name : "ThirdSection",
 props : ['datas3'],
  
}
</script>

singlepage.vue: this is same component i want This is the component I want to show on this page

<template>

   <div class="content">
       <div class="content-sidebar">
       <SideBar />
   
       </div>
       <section class="main-content">

         <div class="content-container">
             <div class="content-img"> <img src="" alt=""></div>
             <div class="content-text" >
                 <h2></h2>
                 <p></p>
             </div>
         </div>
       </section>
    
   </div>


</template>

<script>


import SideBar from '../../components/Sidebar.vue'

export default {
components :{
    SideBar
},

 

setup() {

    function getContent(){
        fetch('request URL' , {
            method : 'post',
            body : JSON.stringify({
                RequestID : '$router.params.id',
            }),
        })
        .then(response => response.json())
        .then(data => console.log(data));

    }
    getContent();
    
}
}
</script>

I think I have a problem with the RequestID, but I do not know how to solve it?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source