Conditional rendering

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.


Essential 
Professional 
Enterprise ✓
ReportR ✓

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
  2. Mettre en place vos formules
  3. Ajuster le HTML de vos widgets


1 Créez votre questionnaire

Connectez-vous et vérifiez que vous avez ajouté toutes vos questions.


questions - qb1 qb2


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.


add formulas


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.


add text widget 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>


conditional rendering example vue.js


Après avoir ajouté toutes vos conditions, votre widget de texte devrait ressembler à ceci:


text widget conditional rendering vuejs


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):


text widget preview on conditional rendering


C'est tout! En savoir plus sur l'utilisation de Vue.js Conditional Rendering

V
Vincent est l'auteur de cet article de solution.

Cette réponse a-t-elle été utile ? Oui Non

Envoyer vos commentaires
Nous sommes désolés de ne pas avoir pu répondre à votre question. Aidez-nous à améliorer cet article grâce à vos commentaires.