如何为Symfony ChoiceType单选按钮添加Vue.js v-model属性

问题背景 #

你遇到的问题是Symfony默认的expanded=true单选ChoiceType渲染逻辑，只会把传入的attr应用到外层容器，不会继承给内部的<input type="radio">元素，所以直接给form_row传attr会绑错位置。这里提供两种可行的实现方案：

方案1：表单类配置choice_attr（最推荐，无额外模板改动） #

直接在定义ChoiceType字段的表单类中，通过choice_attr参数给所有子选项绑定全局属性，不需要修改Twig渲染逻辑：

// 对应表单类的字段配置代码
->add('foo', ChoiceType::class, [
    'expanded' => true,
    'multiple' => false,
    'choices' => [
        // 此处填写你的选项配置，例：'选项A' => 'a', '选项B' => 'b'
    ],
    'choice_attr' => [
        'v-model' => 'foo',
    ],
])

如果需要给不同选项设置不同的属性，choice_attr也支持传入闭包生成动态值。配置完成后直接正常调用{{ form_row(form.foo) }}即可，每个单选input都会自动带上v-model属性。

方案2：自定义Twig表单主题（适用于v-model需要在模板层动态传递的场景） #

如果你的v-model值是动态的，需要在渲染模板时才指定，可以重写扩展型ChoiceType的渲染块：

1. 首先在你的Twig模板顶部注册自定义主题，重写默认的choice_widget_expanded块：

{% form_theme form _self %}

{% block choice_widget_expanded %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
    {% for child in form %}
        {# 把外层传入的attr合并到子input的属性中 #}
        {{ form_widget(child, {
            'attr': attr|default({})|merge(child.vars.attr|default({}))
        }) }}
        {{ form_label(child) }}
    {% endfor %}
    </div>
{% endspaceless %}
{% endblock choice_widget_expanded %}

2. 之后调用form_row时传入的attr就会自动绑定到每个单选input上：

{{ form_row(form.foo, {'attr': {'v-model':'foo'}}) }}

内容的提问来源于stack exchange，提问作者Thomas Landauer