How do I get the value of the ion-radio without having to choose any options?

Ionic Framework Ionic Vue
1

I have a pre-selected radio input and I need to pass the value to the form, the problem is that it’s not working, it’s empty.

             <ion-radio-group  v-model="accept" value="yes">
                  <ion-item>
                      <ion-label>Yes</ion-label>
                      <ion-radio slot="start" value="yes"></ion-radio>
                  </ion-item>
                  <ion-item>
                      <ion-label >No</ion-label>
                      <ion-radio slot="start" value="no"></ion-radio>
                  </ion-item>
              </ion-radio-group>

I tried v-model and IonChange

With IonChange , it works, but only if I click on another option.

Does anyone know how I can get the value of the radio input without having to switch options or change anything?

Thank you.

2

So… finally I found a solution myself.

Yes No

and inside the submit:function(this);, I get the value of the ref like this this.$refs.accept.value. But I have to pass this as parameter inside the submit fucntion, otherwise it won’t work.

In my template:

  <ion-radio-group  ref="accept" value="yes">
                  <ion-item>
                      <ion-label>Yes</ion-label>
                      <ion-radio slot="start" value="yes"></ion-radio>
                  </ion-item>
                  <ion-item>
                      <ion-label >No</ion-label>
                      <ion-radio slot="start" value="no"></ion-radio>
                  </ion-item>
              </ion-radio-group>

and in my submit function:

submit:function(this: any){
  console.log(this.$refs.accept.value);
}

By the way, it means that v-model and @IonChange don’t work, right?

3

You should use either v-model or value, but not both. In this case setting value updates the value of the component outside of the context of your accept ref.

When defining accept set the initial value to "yes".

4

I mean, I forgot to edit the answer. I’m using ref instead of v-model, as the latter didn’t work at all and I also need to set a pre-defined value, which is yes. As far as I know, the only way to do this is defining the value in the ion-radio-group, right? Or is there any other way of doing that?

5

You should only need to use v-model. Can you send a repo? Hard to say what the issue might be without being able to reproduce it myself.

6

Assuming you are using the same app as in your post on V-model doesn't work in ion-textarea - #8 by ldebeasi, the issue may be that you did not provide IonRadioGroup to your Vue component.

1 Like
7

Same thing with ion-textarea…I wasted two whole days trying to figure out what’s wrong. It was imported but not provided in the Vue component. I’m sorry I got so mad…I didn’t even pay attention to the fact that I needed to import and define the components.

Thank you!

1 Like
8

Glad the issue is resolved!

1 Like
9

If you allow me, I actually have another question. You said we shouldn’t use v-model and value both. So I should use ref in that specific case to get the value of the radio if I want a pre-selected radio?

10

If you want to get the value of the radio group on page load or whenever the radio group updates, you should pass a ref to v-model.

So for example:

const radioGroup = ref('abc');

...

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

Logging radioGroup.value on page load should return "abc". Logging it again whenever the radio group value changes should return the value of whichever radio was selected.

1 Like