javascript - 如何使用vue js在单选按钮中添加动态名称

Question

如何在单选按钮中添加动态名称？

<tr v-for="user in users">
    <td>
        <input type="radio" :name="groups_[[ user.id ]]" v-bind:value="photographer" v-bind:checked="user.group.name == photographer"> <label>photographer</label>

        <input type="radio" :name="groups_[[ user.id ]]" v-bind:value="client" v-bind:checked="user.group.name == client"> <label>client</label>
    </td>
</tr>

当我尝试上面的代码时，它给了我一个错误

属性或方法“groups_”未在实例上定义，但在渲染期间引用。确保在数据选项中声明响应式(Reactive)数据属性。

Answer 1

通过添加单引号将 groups_ 转换为字符串。然后添加加号 (+) 将 groups_ 字符串连接到用户 ID。

<input type="radio" :name="'groups_' + user.id" v-bind:value="photographer" v-bind:checked="user.group.name == photographer"> <label>photographer</label>

<input type="radio" :name="'groups_' + user.id" v-bind:value="client" v-bind:checked="user.group.name == client"> <label>client</label>