How do I set a pre selected radio input and pass its value at the same time?

Ionic Framework Ionic Vue
1

I have running into a few issues and most of them were solved by @ldebeasi, who took his time to help me. However, I got into another issue because I need to pass values to the function that submits the form but it’s not working. I mean I either pass the form or I pre define a value for the radio input…I can’t do both, it just won’t work.

This pre selects the value:


<ion-label>Accept</ion-label>
            <ion-radio-group 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>

This pass the value to the function:


<ion-label>Accept</ion-label>
            <ion-radio-group v-model="accept">
              <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>

But if I want to do both:


<ion-label>Accept</ion-label>
            <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>

it simply doesn’t work.

That’s my whole code:


<ion-label>Accept</ion-label>
            <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>

            <ion-button @click="submit(accept)">Save New Member</ion-button>

<script lang="ts">
import { IonButtons,actionSheetController, alertController, IonInput, IonItem,  IonLabel, IonList,  IonListHeader, IonRadioGroup, IonRadio, IonTextarea, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import {useRoute} from "vue-router";
import {ref, onMounted, defineComponent } from 'vue';


export default defineComponent({
  name: 'Folder',
  components: {
    IonButtons,
    IonContent,
    IonHeader,
    IonItem,
    IonInput,
    IonRadioGroup,
    IonRadio,
    IonMenuButton,
    IonPage,
    IonTextarea,
    IonTitle,
    IonToolbar
  },

  //Data from the inputs
  data(){
    return{  
      accept:"",
    };
  },

  setup(){

    const route=useRoute();


    return{
      route
      };
    },
methods: {
    //get data from the inputs/form
    submit:function(accept: any){  
        console.log(accept);
    },
  },
})

</script>

Is there any way to pre select a radio input and pass its value like we normally do with v-model? Like a checked attribute or something?

The docs I’m trying to follow along:

2

As I mentioned in our other threads, you really should not be using v-model and value at the same time. This is a Vue-related restriction as value interferes with v-model. These same rules apply for regular form elements such as <input> and <textarea>.

If you want to pre-select a value, the ref you pass to the v-model should be populated with the value you want to pre-select. You currently define accept as the following:

//Data from the inputs
  data() {
    return {  
      accept: "",
    };
  },

But it should be defined with the "yes" value instead of the empty string:

//Data from the inputs
  data() {
    return {  
      accept: "yes",
    };
  },

Also, the Vue doc you linked to is for Vue 2, not Vue 3. The form input binding guide for Vue 3 is very different. Here is the Vue 3 link: Form Input Bindings | Vue.js

1 Like
3

One thing I think that may be confusing here is the example given in the Vue 3 docs:

<input type="radio" v-model="picked" value="a" />

In this example, the v-model indicates whether or not the radio is selected, and the value simply indicates what the value of the radio is. So in this case, it is fine to use both v-model and value as they represent two different things.

In the case of ion-radio-group, the value prop is used to determine the value of the radio group in addition to which ion-radio is selected. For ion-radio-group, the v-model and value reference the same thing, which is why you should not use both there.

1 Like
4

Yes, that confused me a bit. Thank you for clarifying it. Now it makes sense :joy: :joy:

1 Like