Afficher un champ manuellement avec Vue.js au lieu de Symfony

Publié le 12/06/2019 • Mis à jour le 12/06/2019

English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧

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