Make first item in dynamic radio group checked

Ionic Framework Ionic Vue
1

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.value = radioGroup.childNodes[1].childNodes[2].value;
  }

The code I put in ionViewWillEnter() doesn’t make it checked but it does when I do it in the console after everything has loaded already.

image

www should be checked.

2

I recommend using v-model here instead of trying to manipulate the DOM nodes directly:

<ion-radio-group v-model="myRef">
  ...
</ion-radio-group>

...
import { defineComponent, ref } from 'vue';

export default defineComponent({
  ...,
  setup() {
    const myRef = ref('www');

    return { myRef }
  }
});

v-model lets you provide a reference and keep that reference in sync whenever you click a different ion-radio. So if the reference is initialized to “www” and then you clicked “abc”, the reference value would be updated to “abc”.

v-model is a Vue feature: Form Input Bindings | Vue.js

Note: Some of the examples in the Vue 3 docs show elements with both v-model and value props. For ion-radio-group you should use either v-model or value, not both at the same time.