How can I add dynamic name in radio button?

<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>

When I tried my code above it gives me an error

Property or method "groups_" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

How can I add dynamic name in radio button?

<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>

When I tried my code above it gives me an error

Property or method "groups_" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

• javascript
• vue.js

1 Answer 1

Convert the groups_ to string by adding single quote.. then add plus sign (+) to concatenate the groups_ string to the user 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>