[VueJS] Form récursif, récupération des données

Azorgh
Javascript

Bonjour à tous,

Je développe actuellement ma première "vraie" application en VueJS. (Destiné à une mise en ligne si vous préferez).
Voici le contexte :

Il s'agit d'un système de questions / réponses. Seulement 2 réponses sont disponibles par question : Oui / Non.
Petite particularité, une réponse peut engendrer une ou plusieurs autres questions. Voici donc la structure de mon JSON envoyé côté serveur, qui me semble correcte par rapport à mon besoin :

[{
    "id": 1,
    "question": "Ca va ?",
    "yes_criteres": [{
        "id": 2,
        "question": "Nice ! Moi aussi \u00e7a va !",
        "yes_criteres": [],
        "no_criteres": []
    }],
    "no_criteres": [{
        "id": 3,
        "question": "Tu es malade ?",
        "yes_criteres": [],
        "no_criteres": []
    }]
}]

J'ai donc créé un composant "CritereFormComponent" qui fait appel à lui même dans un cas où il existe des "sous-questions" (appelé critères dans mon projet, mais peu importe).

ShowComponent

<template>
    <critere-form-component :criteres="criteres"></critere-form-component>
</template>

<script>
    import CritereFormComponent from './Criteres/CriteresFormComponent'
    import {CritereService} from '../../../services/Admin/CritereService'

    export default {
        name: "show-component",
        components: {
            CritereFormComponent
        },
        data(){
            return {
                criteres : null,
            }
        },
        /** Suite du code avec récupération du JSON etc ... **/
    }
</script>

Et donc mon CritereFormComponent :

<template>
    <div>
        <template v-for="(critere, index) in criteres">
            <div xs12 :key="critere.id">
                {{ critere.question }}

                <v-radio-group v-model="radios[index]" row>
                    <v-radio label="Oui" :value="1"></v-radio>
                    <v-radio label="Non" :value="0"></v-radio>
                </v-radio-group>

                <criteres-form-component :criteres="getSubCriteres(index)"></criteres-form-component>
            </div>
        </template>
    </div>

</template>

<script>
export default {
    name: "criteres-form-component",
    props: [
        'criteres',
    ],
    data(){
        return {
            radios: []
        }
    },
    watch:{
        criteres(val){
            //Watcher pour reset les radios pour éviter de garder les précédents cochés
            this.radios = [];
        }
    },
    methods:{
        getSubCriteres(index){
            if(this.radios[index] == 1){
                return this.criteres[index].yes_criteres
            }else if(this.radios[index] == 0){
                return this.criteres[index].no_criteres
            }
        }
    }
}
</script>

Le système en soit fonctionne bien. En fonction des réponses sélectionné via mes radios buttons, les questions suivantes s'affichent ou non. Par contre, mon problème est du coup la récupération de ces informations au niveau de mon ShowComponent. Par quel système dois-je passer pour avoir un code propre, un système fonctionnel et pérein ?

Plusieurs pistes se sont offerts à moi mais sans succès jusqu'à aujourd'hui :

  • Passer par un système de v-model
  • Passer par une injection de props mais du coup les données sont non modifiables
  • Un Store VueX (solution non testée)

Voilà où j'en suis au niveau de mes recherches. Si je pouvais avoir quelques pistes de réflexions pour que je puisse réaliser mon formulaire récursif de la mort qui tue, je vous en serais reconnaissant.

Merci d'avance et des bisous !
Azorgh.

Aucune réponse