我有一个无线电按钮ionicvue 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();
  }
},

我想如果你想用$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();
    });
  }
},
使用nextTick 回调:this.$nextTick(() => this.$refs.product_size.focus())
……谢谢,但是我必须用……this.$refs.product_size.$el.focus(); 这个。增加的$el 在…之前.focus()