CODEWITHSUNDEEP
javascriptradio-buttonvuejs3v-for
Mark McKeon
Mark McKeon

Reputation: 149

Vue 3 v-for dynamic radio buttons

I am creating an online multiple choice exam and I cant work out why when I dynamically create radio buttons using a v-for the user has the ability to select multiple buttons?? I want the user to only select one button at a time. Currently, the user has to deselect the original option and then select another button.

Here is my code:

            <label
            v-for="(value, index) in newObject[idx]"
            :key="index"
            class="block mt-4 border border-gray-600 rounded-lg py-2 px-6 text-lg"
            :class="
             {
            'hover:ring-indigo-700 hover:border-indigo-700 cursor-pointer':
                selectedAnswer == '' || selectedAnswer !== '',
             },  
             {
             'ring-4 ring-indigo-700 border-indigo-700': selection(
                answersArray,
                value
                ),
                }
                "
              >
                <input
                  :id="value"
                  type="radio"
                  class="hidden"
                  :value="value"
                  @click="answered($event)"
                />
                {{ value }}
              </label>

Please halp.

Upvotes: 0

Views: 1629

Answers (1)

Daljit Kumar
Daljit Kumar

Reputation: 88

You have to give these radio buttons same name. This will make them part of a group and only one radio button will be selectable at a time.

<input name="abc" type="radio"/>

Upvotes: 1

Related Questions