Need help accessing data from an API using Axios.post and passing an ID?

Can someone help me with passing the ID of each item using Axios.Post in order to display its data on a single page? The image below in my Postman shows how I need to send the ID along with the request. Additionally, I have the first two URL requests for the first page and the second request to fetch the data of each item on the first page.

Here is the link explaining how to pass the ID in RequestID in raw format

firstPage.vue

<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="/content" @click="getContent" >
           <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'],
}

/// Your code goes here

</script>

singlePage.vue

<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
},
</script> 

Is there a way to display the data of each item on the single page?

Answer №1

It seems like you're inquiring about passing parameters in Vue and utilizing them in an axios post request. To achieve this, define the key for dynamic path parameters in your router file and access them in your component using this.$route.key.

To learn more about dynamic path parameters, check out this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having to click the update button multiple times for a Vue-chartjs chart with method parameter can be

In an attempt to enable users to display different charts by sending the id of the chosen chart to the fillData method, I have encountered several issues with the current code. One problem is that after a chart is loaded, it requires two clicks of the othe ...

Tips for monitoring transactions/events on a particular wallet with ethers.js?

Is there a method to monitor all transactions labeled as "mint" occurring on a designated wallet using ethers.js? While I am aware of the option to establish a filter for tracking a particular event signature, my aim is to keep tabs on all "mint" events, e ...

Different ways of manipulating images with JavaScript

I attempted to tackle the issue independently, but I'm stumped. Is there a way to adjust the width of an image in JS when the screen dimensions are changed? ...

Tips for displaying identical tab content across various tabs using jquery or javascript

For instance, if we have tabs labeled as 1, 2, 3, 4, and 5, and a user has selected tabs 2, 3, and 4, how can we display the same content for those tabs while showing different content for the remaining ones? ...

What is the most efficient way to update all elements within an array in a MongoDB document to a specific value?

Imagine a scenario where I possess the subsequent document: { _id: ObjectId("5234cc89687ea597eabee675"), code: "xyz", tags: [ "school", "book", "bag", "headphone", "appliance" ], qty: [ { size: "S", num: 10, color: "blue" }, ...

What is the best way to bust the cache for my Vue applications that are deployed on Ngin

Greetings! I am facing an issue with my Vue apps deployed on an nginx server. Sometimes, updates do not reflect for users due to cached versions. Is there a way to clear the cache without renaming all files and components in the apps? Are there any user-f ...

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

When utilizing AMP's binding feature, you must apply specific attributes that encapsulate an element's property with square brackets and connect it to an expression. An example from AMP is shown below: <p [text]="'Hello ' + foo"> ...

receiving an object as the return value in AngularJS

To access locfrnd in the code snippet below, follow these steps: I have created an Array named PlaceCollection containing 2 elements. place locfrnd, which is an array While I was able to successfully access place, I encountered an error when trying to a ...

The attribute selector specifically targets the number 3, excluding numbers such as 13 or 23 from being selected

Within a form, there is a segment that displays groups of 4 weeks in each division. Take a look at the code snippet provided below <div class="form-check" data-weeknr="1,2,3,4"></div> <div class="form-check" dat ...

Exploring jQuery: Moving between different table cells using traversal techniques

Seeking assistance from experienced jQuery users as I am new to this library and may not be approaching this task correctly. I have a dynamically generated HTML table that is quite extensive. To enhance user experience, I aim to assign navigation function ...

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected. https://i.stack.imgur.com/btSc2.jpg HERE IS THE CODE FOR MY MUI BUTTON SO FAR import * as React from "react"; import Radio from &quo ...

Tips for positioning a sticky div underneath a stationary header

I'm currently utilizing Bootstrap 4 for my project, and I am encountering an issue with maintaining a div that has the class "sticky-top" just below a fixed navbar. Despite attempting to use JavaScript to replace the CSS while scrolling, it hasn' ...

What is the procedure for extracting data from a JSON file within an HTML document?

Hey there, I am currently working on reading data from a json file using ajax. I have created a Video object that consists of Courses objects with titles and URLs. However, when attempting to read the title and URL of HTML as an example, I am not seeing a ...

Uploading Massive Form Data Using Angular JS

After spending countless hours on this project, I still can't figure out how to post data into a table using JavaScript objects. While I can easily work with smaller data sets, I'm struggling with handling multiple nested objects. EDIT: ...

Angular protection filter

Every time I used Angular CLI to generate a new component, it would create the component with standard parameters: @Component({ selector: 'app-test1', templateUrl: './test1.component.html', styleUrls: ['./test1.component.css ...

Rearrange Firebase data on the client side

Having trouble sorting data in Firebase for a web project. I tried using orderByChild to filter the data, but now I need to also order it by date. Here's what I've attempted: Tried using object.values with .sort, no luck Attempted to use lodas ...

What is the best way to access a custom object in JavaScript that was created in a different function?

Currently working with JavaScript and jQuery technology. In one of my functions that runs on document ready, I am creating objects with different attributes. While I can easily access these object attributes within the same function, I'm facing diff ...

The mathematical logic behind navigating forward and backward in Angular

Calling all math experts! I need your help with a slider issue. The prevSlide function is working perfectly, but the nextSlide function seems to be starting off on the wrong foot. It goes 1-2-3 and then jumps to 2-3-2-3... It's definitely a math probl ...

Ajax disregards the endless scroll material that has been injected into the DOM

I am currently facing an issue with loading posts on a page using foreach and the paginate function in Laravel. I have set up infinite scrolling through the posts, with each post having its own unique form. The first posts that load without JavaScript scro ...

Is there a way to connect the select2 plugin to a select element that contains plugin options in a JSON object stored in the data attribute?

Utilizing various select2 plugins, I am looking to set the options and values of the plugin based on the data attributes of related elements. The following is an example: HTML <select data-plug="select2" data-plug-op='{"placeholder":"text1","con ...