Bonjour,
Je saurais pas trop expliquer ça, mais j'aimerais créer une "librairie" qui lorsqu'on clique sur un item, on est dirigé vers ce que l'on a demandé, mais je me suis perdu je pense.. Pourquoi je me prends la tête ? Je voudrais utiliser qu'une seule vue pour toutes ces routes pour que les données soient modifiables avec Firebase par la suite.
Par exemple, on peut visiter de lien en lien : site/hallucinogens/psychedelics/mushrooms..
Je voudrais faire comme un chemin que l'on peut parcourir : chaque page utilise la même vue mais pas les mêmes items.
J'ai donc essayé de me débrouiller avec les v-if en fonction de la route, ça marche un peu mais pas complètement.
Ma vue :
<template>
<div>
<p>{{ $route.params.id }}</p>
<ul v-if="!$route.params.id">
<li v-for="(item, index) in items" v-bind:key="index">
<router-link :to="{ path: '/risks-reduction/' + item.name }">
{{ item.fullName }}
<!-- <span v-if="item.classes">{{ item.classes[0].name }}</span> -->
<!-- <p>{{ item.classes }}</p> -->
</router-link>
</li>
</ul>
<ul v-if="$route.params.id">
<li v-for="(item, index) in items[0].classes" v-bind:key="index">
<router-link :to="{ path: $route.path + '/' + item.name }">
{{ item.fullName }}
<!-- <span v-if="item.classes">{{ item.classes[0].name }}</span>
<p>{{ item.classes }}</p>-->
</router-link>
</li>
</ul>
<ul v-if="$route.params.family">
<li v-for="(item, index) in items[0].classes[0].substances" v-bind:key="index">
<router-link :to="{ path: $route.path + '/' + item.name }">
{{ item.fullName }}
<!-- <span v-if="item.classes">{{ item.classes[0].name }}</span>
<p>{{ item.classes }}</p>-->
</router-link>
</li>
</ul>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
props: ["id", "family", "substances"],
data() {
return {
items: [
{
name: "hallucinogens",
fullName: "Hallucinogènes",
classes: [
{
name: "psychedelics",
fullName: "Psychédéliques",
substances: [
{
name: "mushrooms",
fullName: "Champignons Psilocybe"
},
{
name: "lsd",
fullName: "LSD"
}
]
},
{
name: "dissociatives",
fullName: "Dissociatifs",
substances: [
{
name: "nitrous_oxide",
fullName: "Protoxyde d'azote"
},
{
name: "ketamine",
fullName: "Kétamine"
}
]
}
]
}
]
};
},
});
</script>
Router.ts :
{
path: '/risks-reduction/',
name: 'risks-reduction',
component: RisksReduction,
props: true,
children: [
{ path: '/risks-reduction/:id', props: true },
{ path: '/risks-reduction/:id/:family', props: true },
{ path: '/risks-reduction/:id/:family/:substances', props: true },
]
// J'ai essayé de le faire sans recopier le path à chaque fois, mais c'est un échec
}
Bon, c'est un peu fait à l'arrache mais je vois pas comment faire autrement ^^'
Peut être que je me suis mal exprimé, alors si vous avez des questions ou conseils, je suis preneur :)
Merci d'avance !