使用 vue js 专注于离子无线电

Question

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

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

使用 vue js 专注于离子无线电

focus on ion-radio using vue js

javascript

vue.js

ionic-framework

ionic4

setfocus