How to get ion-radio value in vue js – ionic

I am using ionic framework in vuejs.

I have created a product page but it does not contain any form in it.

There is a radio button in the page which contains size of the product.

How can I access the selected value of the radio button created with ion-radio
when add to cart button is pressed from that page.

I am new to vue.js. Usually I used to get the value in jQuery using following method:


How can I get the selected radio button value in vuejs???

Here is the html part:

<ion-list v-if="product.size_maps">
        v-for="size in product.size_maps"
          <ion-label class="ion-no-margin">
            {{ size.size.text }}
          <ion-radio slot="start" :value=""></ion-radio>

I have created a method called addToCart:

  methods: {
    addToCart(event) {
      // get radio button value here

Here is how I called the addToCart function in the button

  Add To Cart


I tried to use v-model to get the data. but since there is no input tag available I could not add that.

If I added the v-model in ion-radio tag then all the radio buttons are being checked

72 thoughts on “How to get ion-radio value in vue js – ionic”

Leave a Comment