1π
β
If I understand correctly you want to click on a card to go to itβs details.
You can do something like this in your dom:
<vs-button @click="goToDetails(info.id)">Explore</vs-button>
and in your script on the same file:
methods: {
gotoDetails(id) {
this.$router.push({ name: 'letsCheck', params: {id}})
}
}
Also if your API has an endpoint something like detail just make a created method to get ID (look at below code) and send your get request and display only that card in your component.
data() {
return {
infoDetail: null
}
},
created () {
this.$http.get(`/infos/${this.$route.params.id}`)
.then((response) => { this.infoDetail = response.data })
.catch((error) => { console.log(error) })
}
1π
In the first place many of your questions have been answered here How do i use the id coming from the API response in other parts of HTML & Scripts in VueJS.
Now for letsCheck
component dynamic building:
{
path: '/views/frames/:viewContentId',
name: 'letsCheck',
component: () => import('./views/frames/Contents.vue'),
props: (route) => {
const viewContentId = route.params.viewContentId.toString()
return { viewContentId }
},
}
Components.vue
props: {
viewContentId: {
type: String,
required: true,
},
},
Then in the component you can use the viewContentId
to do any api call with this is which is the id from the router and render dynamically the template
Source:stackexchange.com