How can i display the element of a selected Id in vuejs? - php

Question

I have a page called Home.vue i have a router link which is id once users click it it takes them to the page, how can i display the data elements of the clicked id?
<li class="ta-track-card column col-2 flex-column" v-for="faq in faqs">
<div class="inner">
<div class="artwork" role="link">
<router-link :to="`/album/${faq.id}`"><span :style="`background-image: url('http://localhost/mymusic/${faq.artworkPath}');`"></span></router-link>
</div>
<div class="info">
<div class="title white-primary-hover"><router-link :to="`/album/${faq.id}`">{{ faq.title }}</router-link></div>
<div class="username light-white-hover">
<span>by </span>
<router-link :to="`/artist/${faq.artistId}`">{{ faq.artist }}</router-link>
</div>
<div class='released'>Released On {{ faq.albumdate }}</div>
</div>
</div>
</li>
Below is the Album.vue Page where i display the data
<div class="entityInfo">
<div class="leftSection" v-for="faq in faqs">
<img :src="/""faq.artworkPath">
</div>
<div class="rightSection" v-for="faq in faqs" :key="faq.id">
<h2 class="_good">{{ faq.title }}</h2>
<p class="_me">By {{ faq.artist }}</p>
<p class="_me">1 songs</p>
<p class="_me">{{ faq.albumdate }}</p>
</div>
Below is Script i use:
<script>
import axios from 'axios';
export default {
name: 'album',
data: () =>({
faqs: [],
songs: [],
errors: []
}),
created() {
axios.get('http://localhost/mymusic/rest/api/album/read')
.then(response => {
this.faqs = response.data.data;
})
.catch(e => {
console.log(e),
this.errors.push(e)
})
}
}
</script>
Below is the Sample API:
{
"data": [
{
"id": "41",
"artistId": "38",
"title": "Red Handed",
"artist": "Peruzzi & Mayorkun",
"artworkPath": "assets/images/artwork/red.jpg",
"albumdate": "2018-09-24"
},
{
"id": "40",
"artistId": "37",
"title": "FEFE (feat. Nicki Minaj & Murda Beatz)",
"artist": "6ix9ine",
"artworkPath": "assets/images/artwork/fefe.jpg",
"albumdate": "2018-07-22"
},
}
Please how can i display the element of the Id i click from the router

Answer 1

As i can see you are passing the id in the route you can retrieve it using id = this.$route.params.id and store it in a temporary variable.And in created just retrieve the data by passing id in post parameter and changing your query accordingly.Or the other option is to loop over through your retrieved data and filter them from the selected id.
Or rather then filter create the data object as id->value pairs to directly access them through id and you will have to make single api call.