使用 vue js 专注于 ion-radio答案

【问题标题】：focus on ion-radio using vue js使用 vue js 专注于 ion-radio
【发布时间】：2021-01-30 09:49:51
【问题描述】：

我在ionic vue js 中有一个单选按钮，如下所示：

<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>

我想关注单选按钮如果用户点击add-to-cart按钮而不选择单选

我尝试使用ref，但无法正常工作

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();
  }
},

【问题讨论】：

使用nextTick 回调：this.$nextTick(() => this.$refs.product_size.focus())
@YashMaheshwari 它工作了谢谢 :) 但我必须使用 this.$refs.product_size.$el.focus(); 这个。在.focus()之前添加$el

标签： javascript vue.js ionic-framework ionic4 setfocus

【解决方案1】：

我想如果你想在任何方法中使用$ref 变量，你需要使用$enxtTick 来访问变量

解决办法如下：

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();
    });
  }
},

【讨论】：