Make first item in dynamic radio group checked on m

Hi, I want to have the first item of this radio group checked on load. The radio group gets created dynamically.

          <ion-radio-group id= 'radio-group' mode='ios' value='chairs' @ionChange='changeColor'>
            <ion-item v-for='chair in chairs' v-bind:key='chair.name' lines='none'>
              <ion-label v-if="chair.type == 'AUWR'" style="color:#CACACC;  line-height: 24px; font-size: 16px; letter-spacing: -0.25px;">{{chair.name}} <span>{{showMetric ? inchesToMetric(chair.size) + 'cm' : chair.size + '"'}}</span></ion-label>
              <ion-label v-if="chair.type == 'OWR'" style="color:#CACACC;  line-height: 24px; font-size: 16px; letter-spacing: -0.25px;">{{chair.name}}</ion-label>
              <ion-radio slot='start' v-model='chair.name' @click='onClickRadio(chair.size, chair.type)'></ion-radio>
            </ion-item>
          </ion-radio-group>
  ionViewWillEnter() {
    const radioGroup = document.getElementById('radio-group');
    radioGroup.childNodes[1].childNodes[2].checked = true;
  }

The code I put in ionViewWillEnter() doesn’t make it checked.

image

www should be checked. What is aria-checked is that what I should be setting?

ARIA helps people who use assistive navigation, and isn’t related here.

You posted this to the v3 subforum, which is Angular-only, yet this does not look like Angular syntax. If you were using Angular, the proper way to achieve what you want is to assign to the backing property in the controller.

So I would suggest moving this topic to whatever subforum represents the framework you are using, because the answer is likely to be specific to that framework.