Afficher un champ manuellement avec Vue.js au lieu de Symfony
Publié le 12/06/2019 • Actualisé le 12/06/2019
Quand on construit un formulaire, on a parfois besoin de construire le rendu d'un champ spécifique avec Vue.js au lieu de Symfony. Utiliser Vue.js nous permet par exemple d'avoir des options dynamiques dans une boîte de sélection. Dans ce cas le libellé affiché sera dépendant d'un autre champ (qui est stocké dans variable calculée isTrainee). Puis les options de la boîte de sélection "duration" seront chargées dynamiquement grâce à la variable calculée durationsForType. Veuillez notez qu'ici nous évitons uniquement l'utilisation du helper Twig form_widget. Nous utilisons toujours les autres helpers comme form_label(), form_errors() mais aussi les variables de formulaires (form.duration.vars.id, form.duration.vars.name...) afin de garder le code dynamique.
<div class="form__item">
{{ form_label(form.duration, "Durée { isTrainee ? 'du stage' : 'de la mission'} :") }}
<select id="{{ form.duration.vars.id }}" name="{{ form.vars.name }}[{{ form.duration.vars.name }}]">
<option v-for="duration in durationsForType" v-bind:value="duration.id">{ duration.label }</option>
</select>
{% if form_errors(form.duration) is not empty %}<div class="modal-error"><div class="arrow"></div>{{ form_errors(form.duration) }}</div>{% endif %}
{% do form.duration.setRendered() %}
{# Mark form field as manually rendered so it's not displayed Twice by the form_rest() Twig helper #}
</div>
Plus sur Stackoverflow Lire la doc Snippet aléatoire
