将 `v-model` 添加到 Symfony `ChoiceType` 单选按钮答案

【问题标题】：Adding `v-model` to Symfony `ChoiceType` radio buttons将 `v-model` 添加到 Symfony `ChoiceType` 单选按钮
【发布时间】：2021-12-08 16:15:18
【问题描述】：

将 Vue.js v-model 添加到 Symfony 单选按钮（即 ChoiceType 和 'expanded' => true, 'multiple' => false）的最简单方法是什么？ Vue.js 在每个 <input type="radio"> 上都需要 v-model，请参阅 https://v3.vuejs.org/guide/forms.html#radio

我的解决方案/解决方法是在 Twig 中使用 form_widget() 呈现每个单选按钮：

{% for foo in form.foo %}
    {{ form_widget(foo, {'attr': {'v-model':'foo'}} ) }}
{% endfor %}

但是有没有办法通过form_row() 一次性获取它们？

attr 或 row_attr 不起作用：

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

两者都导致v-model被添加到容器：

<div v-model="foo">

【问题讨论】：

从 Symfony 4.3 开始，row_attr 选项允许添加属性。这里：symfony.com/blog/…

标签： php vue.js symfony

【解决方案1】：

解决方法是choice_attr，但是由于需要传递回调函数，所以在Twig中不能这样做，而是在你的FormType中：

$builder->add('foo', ChoiceType::class, ['expanded' => true, 'multiple' => false,
    choice_attr' => function($choice, $key, $value): array {
        return ['v-model' => 'foo'];
    },
]);

【讨论】：