Estoy creando una aplicación para gestionar ciertos mantenimientos por parte del usuario. Creé un componente que muestra todos los datos que ingresé en una matriz de objetos. Mi problema es cómo redirigir al usuario a una página diferente para cada componente en el que haga clic (cada página debe tener datos de componentes). Para reinderizar pasé la sintaxis de Vue $ {maintenance.id} pero sin obtener resultados.
<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 está malinterpretando la interpolación de javascript. Prueba así:
<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>