如何解决使用 vue js 专注于 ion-radio
我在 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();
}
},
解决方法
我想如果你想在任何方法中使用 $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();
});
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。