Conditional Rendering est un moyen d'afficher des éléments en fonction d'une condition. Il vous permet de créer des conditions simples à l'intérieur d'un widget et de réduire le nombre de widgets et de règles. Avec le rendu conditionnel, vous pouvez rendre différentes balises de l'interface utilisateur en fonction de certaines conditions.
Conditional Rendering est un moyen alternatif de logique de widget et il est fait dans le code HTML en utilisant Vue.js. Maintenant, voyons comment faire ! Dans ce guide, nous allons aborder les points suivants:
1 Créez votre questionnaire
Connectez-vous et vérifiez que vous avez ajouté toutes vos questions.
Dans cet exemple, nous avons divisé notre questionnaire en deux parties et créé deux blocs de questions pour celui-ci (pour l'utiliser dans nos formules).
2 Mettre en place vos formules
Après avoir créé votre questionnaire, allez dans l'onglet Options extras et ajoutez toutes vos formules.
Dans notre exemple, les deux formules comptent le score personnalisé de chaque bloc de questions. Nous allons utiliser nos formules plus tard dans notre rapport PDF.
3 Ajuster le HTML de vos widgets
Une fois que vous avez terminé de construire votre questionnaire, allez dans votre rapport PDF et commencez à ajouter des widgets.
Ajoutez votre widget de texte et cliquez sur la < > vue HTML.
Maintenant, vous pouvez commencer à configurer le rendu conditionnel. Dans cet exemple, nous allons utiliser les formules présentées ci-dessus. Commencez par ajouter la directive v-if pour rendre votre bloc de manière conditionnelle.
Maintenant, vous pouvez ajouter votre condition : "Si *|f1_results|* est inférieur à 7, alors 'Texte de score faible'.
<div v-if="*|f1_result|* < 7"> <p>Low score text</p></div>
Après avoir ajouté toutes vos conditions, votre widget de texte devrait ressembler à ceci:
Et voici à quoi ressemblera votre widget sur votre PDF (dans cet exemple, la partie 1 et la partie 2 ont toutes deux obtenu une note élevée):
C'est tout! En savoir plus sur l'utilisation de Vue.js Conditional Rendering.