CODEWITHSUNDEEP
javascriptvue.js
ParTidA
ParTidA

Reputation: 106

how to add dynamic name in radio button using vue js

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.

Upvotes: 0

Views: 4327

Answers (1)

bruce
bruce

Reputation: 96

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>

Upvotes: 8

Related Questions