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:

$('input[name=radioName]:checked').val()

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

Here is the html part:

<ion-list v-if="product.size_maps">
  <ion-radio-group>
    <ion-row>
      <ion-col
        v-for="size in product.size_maps"
        :key="size.id"
        size="6"
        id="product_size"
      >
        <ion-item>
          <ion-label class="ion-no-margin">
            {{ size.size.text }}
          </ion-label>
          <ion-radio slot="start" :value="size.size.id"></ion-radio>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-radio-group>
</ion-list>

I have created a method called addToCart:

  methods: {
    addToCart(event) {
      console.log(event);
      // get radio button value here
    }
  }

Here is how I called the addToCart function in the button

<ion-button
  color="primary"
  fill="solid"
  expand="block"
  size="default"
  v-on:click="addToCart"
>
  Add To Cart
</ion-button>

Edit:

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