Utilisation des props

Vincent_LETB
Javascript VueJS

Bonjour à tous,
Je debute avec la technologie VueJS et j'aurais besoin de votre aide.
Je suis en train de faire un petit projet pour pratiquer. J'ai crée une liste d'information avec un JSON en utilisant un v-for. Les informations remontent correctement jusque là pas de soucis. j'ai créer un composant "modal" qui va permettre d'afficher plus de details lorsque l'on clique sur un bouton present dans la boucle. Pour eviter d'avoir 50 modals. J'ai voulu avoir qu'une modal qui recupere les informations dans la liste , j'ai donc placé la balise du composent enfant "modal" en dehors de la boucle v-for.

Voici une version simplifier de mon code actuel :

<template>

    <section class="villes-liste">
        <div v-for="ville in villes" :key="ville.ID" class="ville">
            <h2>{{ ville.titre }} </h2>
            <h3>{{ ville.population }} </h3>
            <button class="btn-modal" v-on:click="toggleModal()">Plus de details</button>
        </div>

        <modal v-bind:active="active" v-bind:detail="????????" v-bind:toggleModal="toggleModal" />

    </section>
</template>

<script>
  import reponse from "../json/villes.json";
  import modal from '../components/modal.vue';

  export default {
    name: "villesliste",
    components: {
      modal,
    },
    data() {
      return {
        villes: JSON.parse(JSON.stringify(villes.ville)),
        active: false,
      };
    },
    methods: {
      toggleModal: function () {
        this.active = !this.active;
      },
    },
  };
</script>

J'aimerais bien comprendre comment fonctionne les props et comment faire pour recupérer un ID pour mon composent enfant "modal" sachant qu'il n'est pas dans la boucle.

Merci d'avance pour votre aide,

3 réponses

gillesr
Réponse acceptée

Bonjour,

Tu n'as pas besoin d'un boolean pour la modal, tu peux juste remplacer

active: false
par

active: null

puis tu changes ta méthode :

toggleModal: function (ville) {
    this.active = ville;
 }

et dans le v-on-click :

<button class="btn-modal" v-on:click="toggleModal(ville)">Plus de details</button>

ensuite dans la modale :

<modal v-if="active" v-bind:detail="active" v-bind:toggleModal="toggleModal" />

Après, je n'ai pas testé, mais le principe, c'est de passer la ville cliquée à ta modale (d'ailleurs, il vaudrait mieux renommer active en selection par exemple)
et pour masque la modale, il suffit de faire
active=null

Vincent_LETB
Auteur

Petite update,
si j'ajoute :
v-on:click="toggleModal(ville.ID)"

et que dans ma fonction toggleModal fait : 

toggleModal: function (prop) {
        this.active = !this.active;
        this.detail = prop;
        console.log(this.detail);
      },

le console log remonte bien l'ID de la ville mais l'information ne remonte pas jusqu'a l'enfant.

Vincent_LETB
Auteur

Merci beaucoup Gillesr !

Ton code a fonctionné ! Je vais également renommer mes elements pour avoir un code plus lisible et compréhensible !

Je te souhaite une bonne journée,