how to add dynamic name in radio button using vue js

Question

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.

bruce · Accepted Answer · 2017-02-22 02:49:26Z

8

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>

edited Feb 22, 2017 at 2:49

answered Feb 22, 2017 at 2:41

bruce

962 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to add dynamic name in radio button using vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related