[VueJS] Transmission de données parent/enfants

Bonjour à tous,

Je développe actuellement un outils en ayant recours à VueJS et Nuxt.

J'ai découpé celui-ci de la façon suivante :

- Une page index.vue qui inclue un composant "F3Calculator"

- Un composant "F3Calculator" qui inclue les composants "F3CalculatorForm" et "F3CalculatorResults"

- Un composant "F3CalculatorForm" qui contient un simple formulaire permettant à l'utilisateur de saisir les données nécessaires

- Un composant "F3CalculatorResults" qui affiche les résultats des calculs effectués

La logique entre ces composants est la suivante :

L'utilisateur affiche la page /f3/(index.vue). Le composant F3Calculator est chargé, appelant lui même F3CalculatorForm et F3CalculatorResults.

L'utilisateur saisi les données dans le formulaire affiché par F3CalculatorForm, qui envoie lesdites données à son parent, F3Calculator, qui les transmet à son enfant F3CalculatorResults, en charge de la logique et de l'affichage des résultats.

Cette logique est volontairement complexe, le but étant de m’entraîner à échanger des données à plusieurs niveaux entre parents et enfants. Je suis conscient que la logique devrait théoriquement être assurée par le parent F3Calculator (et non l'enfant F3CalculatorResults) et le résultat final envoyé pour affichage seulement dans F3CalculatorResults.

Je bloque justement sur l'échange de certaines données : lors de l'affichage de la page, je n'arrive pas à accéder aux propriétés de ?? avec created().

Voici les codes "simplifiés" des pages :

index.vue :

<template>
    <section class="section">
        <f3-calculator />
    </section>
</template>

<script>
    import F3Calculator from "~/components/F3Calculator.vue";

    export default {
        components: {
            F3Calculator
        }
    }
</script>

F3Calculator.vue :

<template>
    <section class="section">
        <f3-calculator-form @updatedInputValue="recievedData = $event" />
        <f3-calculator-results :from-parent="recievedData" />
    </section>
</template>

<script>
    import F3CalculatorForm from "~/components/F3CalculatorForm.vue"
    import F3CalculatorResults from "~/components/F3CalculatorResults.vue"

    export default {
        data: function(){
            return {
                recievedData: ''
            }

        },

        components: {
            F3CalculatorForm,
            F3CalculatorResults
        },

        name: "F3Calculator"

    }
</script>

F3CalculatorForm.vue :

<template>
    <section class="section">
        <div class="tile is-ancestor">
            <div class="tile is-parent">
                <div class="tile is-child tile-content">
                    <b-field label="Distance Tragus - Tragus (cm)">
                        <b-numberinput v-model="tragusToTragus" @input="changeInputValue()"></b-numberinput>
                    </b-field>
                    <b-field label="Distance Nasion - Inion (cm)">
                        <b-numberinput v-model="nasionToInion" @input="changeInputValue()"></b-numberinput>
                    </b-field>
                    <b-field label="Circonférence crânienne (cm)">
                        <b-numberinput v-model="headCircumference" @input="changeInputValue()"></b-numberinput>
                    </b-field>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        data: function(){
            return {
                tragusToTragus: 37,
                nasionToInion: 38.5,
                headCircumference: 59
            }
        },

        name: "F3CalculatorForm",

        methods: {
            changeInputValue(){
                let payload = {
                    tragusToTragus: this.tragusToTragus,
                    nasionToInion: this.nasionToInion,
                    headCircumference: this.headCircumference
                }
                this.$emit('updatedInputValue', payload)
            }
        },

        created: function() {
            this.changeInputValue()
        }
    }
</script>

F3CalculatorResults.vue :

<template>
    <section class="section">

        <p>Source data :</p>
        <ul>
            <li>Tragus to Tragus : {{ inputValues.tragusToTragus }} </li>
            <li>Nasion to Inion : {{ inputValues.nasionToInion }} </li>
            <li>Head Circumference : {{ inputValues.headCircumference }} </li>
            <li>Recieved Input : {{ fromParent }} </li>
        </ul>
    </section>
</template>

<script>
    export default {
        props: {
            fromParent: {
                required: true
            }
        },

        data: function(){
            return {
                inputValues: {
                    tragusToTragus: 0,
                    nasionToInion: 0,
                    headCircumference: 0
                },
                // ...
            }
        },

        name: "F3CalculatorResults",

        methods: {
            // Les méthodes
        },

        created: function(){
			this.inputValues = this.fromParent // undefined
            console.log(this.fromParent) // undefined
        }
    }
</script>

L'envoi des données du child "Form" vers le parent puis la redirection du parent vers "Results" fonctionne.
En revanche, dans "Results", je n'arrive pas à utiliser les données dans le code javascript. Autant l'affichage de la props {{ fromParent }} fonctionne, autant l'usage de "this.fromParent" dans la logique renvoi "undefined".

Je ne comprends pas pourquoi ?

Merci d'avance.

-
Edité par Lucky-Strike 25 juin 2019 à 17:41:04

Bidirectionnelle

[VueJS] Transmission de données parent/enfants

Supprimer

Modérer

Signaler le message aux modérateurs