Can someone help me understand how to fetch data using a loop in Vue.js version 3 when working with queries? I am trying to retrieve an object based on its id, which is obtained from the URL. However, I seem to be facing some difficulties. Any guidance would be greatly appreciated. Thank you.
vue routing
{
path:'/faq/:idQuestions',
name:'FaqQuestion',
component:() => import('../components/admin/faq/FaqQuestion.vue')
},
<template>
<div>
<h2 class="title-faq">Questions fréquentes</h2>
<div class="list-faq"& gt;
<router-link @click="getQuestion" class="link-vehicule" :to="
{name:'FaqQuestion', params:{idQuestions:1}}"><p class="list-faq_question">test 1</p></router-link>
<router-link class="link-vehicule" :to="{name:'FaqQuestion', params:{idQuestions:2}}"><p class="list-faq_question">test 2</p></router-link>
<router-link class="link-vehicule" :to="{name:'FaqQuestion', params:{idQuestions:3}}"><p class="list-faq_question">test 3</p></router-link>
<template>
<div>
<div v-for="faq in faqQuestion" :key="faq.id">
<p>{{faq.id }}</p>
<h1 >{{ faq.title }}</h1>
<p>{{ faq.question }}</p>
</div>
</div>
</template>
<script>
export default {
name:"FaqQuestion",
data(){
return{
idTest: 2,
question:[],
//id:2,
faqQuestion:[
{
id: 1,
title:"New-title-1",
question: "test 1"
},
{
id:2,
title:"new-title 2",
question: "test 2"
},
{
id:3,
title:"new title 3",
question: "test 3"
}
]
}
},
beforeMount(){
const url = window.location.href;
this.id = url.split("/").slice(-1)[0];
console.log(this.id)
}
}
</script>