I'm creating an app to manage certain maintenance by the user. I've created a component that displays all the data I've entered into an array of objects. My problem is how to redirect the user to a different page for each component they click (each page must have component data). To reinderize I passed the Vue syntax $ {maintenance.id} but without getting results.
<card-maintenance
v-for="manutenzione in manutenzioni"
:key="manutenzione.id"
:name="manutenzione.nome"
:data="manutenzione.data"
:durata="manutenzione.durata"
>
<router-link :to="`manutenzione/${manutenzione.id }`">More details</router-link>
</card-maintenance>
Vue is misinterpreting the javascript interpolation. Try like this:
<card-maintenance
v-for="manutenzione in manutenzioni"
:key="manutenzione.id"
:name="manutenzione.nome"
:data="manutenzione.data"
:durata="manutenzione.durata"
>
<router-link :to="'manutenzione/' + manutenzione.id ">More details</router-link>
</card-maintenance>
<template>
<router-link :to="`/manutenzione/${id}`">
<div class="maitenanceItem">
<div class="nameMaintenace">
<p>{{ name }}</p>
</div>
<div class="dataMaintenance">
<p>{{ data }}</p>
</div>
<div class="durataMaintenace">
<p>{{ durata }}</p>
</div>
</div>
</router-link>
</template>