<ion-radio-group> selects all radio buttons by default

Ionic Framework Ionic Vue
1

Hello,

I am using the below code to generate a list of radio buttons in my “native” app.
The radio group is generated just fine but when I select a single option, all of the radio buttons are getting selected.

        <ion-list>
            <ion-radio-group>
              <ion-item v-for="br in brItems" :key="br.id">
                <ion-label>{{ br.name }}</ion-label>
                <ion-radio value="{{br.id}}" ></ion-radio>
              </ion-item>
            </ion-radio-group>
          </ion-list>

I had seen a 5 year old topic on the same and apparently back then it was a bug.
Is this bug still persistent ?
https://forum.ionicframework.com/t/radio-button-bug-all-options-get-selected-with-radiogroup/40258

Did I miss a step?

Any inputs will be appreciated.

2

Can you reproduce this in an Ionic starter app and provide a link to the repo?

3

I’m experiencing a similar issue with Ionic + Vue, all the radio buttons are initially checked.

Do you set the v-model on ion-radio-group or ion-radio?

<ion-radio-group v-model="value">
  <ion-grid>
    <ion-row>
      <ion-col :key="'option-' + index" v-for="(option, index) in options">
        <ion-item>
          <ion-radio :value="option" @input="saveValue"></ion-radio>
          <ion-label>{{option}}</ion-label>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-radio-group>

Update: Oops, looks like I had a typo, after fixing it the radio buttons worked as intended.

4

@ldebeasi Thanks for the response.

I am able to recreate the issue in web and android as well.

Source at - GitHub - akshat666/ionic-issue-radio

Please let me know your inputs.

5

Thanks! There are 2 problems here:

  1. You are doing value="it.id" which will cause the value of each radio to be set to the string “it.id” not whatever it.id evaluates to. You should bind the value using :value="it.id" instead.
  2. You are not importing IonRadioGroup and IonRadio and providing them to your Vue component. Without this import, you will be unable to use :value in the previous step.
1 Like
6

Hello @ldebeasi ,

Thank you. This did solve my issue. A very silly mistake.