focus on ion-radio using vue js

Question

I have a radio button in ionic vue js like this:

<ion-list v-if="product.size_maps">
  <ion-radio-group v-model="selectedSize">
    <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" ref="product_size"></ion-radio>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-radio-group>
</ion-list>

I want to focus on the radio button if user click add-to-cart button without selecting the radio

I tried using ref but it is not working properly

addToCart() {
  if (this.selectedSize > 0) {
    let orderData = {
      selectedSize: this.selectedSize,
      productId: this.product.id,
      orderQty: this.orderQty,
    };
    this.sendOrderRequest(orderData);
  } else {
    this.openToast("Please Select Size First");
    console.log(this.$refs.product_size.$el); // i can get radio button here

    // below two functions are not working
    this.$refs.product_size.$el.setFocus();
    this.$refs.product_size.$el.focus();
  }
},

Answer 1

I figured that if you want to use $ref variable inside any method you need to use $enxtTick to access the variable

Here is the solution:

addToCart() {
  if (this.selectedSize > 0) {
    let orderData = {
      selectedSize: this.selectedSize,
      productId: this.product.id,
      orderQty: this.orderQty,
    };
    this.sendOrderRequest(orderData);
  } else {
    this.openToast("Please Select Size First");

    // use the $nextTick this way
    this.$nextTick(() => {
      // here you can use this.$refs, this.selectedSize, this.orderQty etc
      this.$refs.product_size.$el.focus();
    });
  }
},