ساخت لودینگ درلاراول با vuejs و axios
بنده میخوام زمانی که کاربر محصولی رو به سبد خرید اضافه میکنه از طریق لاراول و vue و axios یک لودینیگی نمایش داده بشه این رو چطوری میتونم پیاده سازی کنم؟ زمانش رو چطوری تعیین کنم که تا زمانی این لودینگ نمایش داده بشه که اطلاعات رو به سرور ارسال میکنه و پاسخ رو از سرور دریافت میکنه ؟؟
پاسخها
2
یک روشش اینه شما یک متغییر ایجاد کنی و false بذاری وقبل درخواست axios این متغییر رو true کنی و تگ لودینگ رو هم جای که میخوای میذاری و با v- show نمایش بدین و پس از درخواستت اون متغییر false میکنی
new Vue({
data: {
loading: false
},
mounted () {
//loading TRUE
this.loading = true;
// axios
axios.get('/URL').then(response => {
this.info = response.data
})
.catch(error => {
})
.finally(() => this.loading = false )
}
})<i v-show="loading" class="fa fa-spinner fa-spin"></i>روش های دیگه هم هست
https://www.digitalocean.com/community/tutorials/add-loading-indicators-to-your-vuejs-application
درخواست هایی که با Axios میفرستید Promise-based هستند
پس به متدهای then و finally دسترسی دارید
قبل از ارسال درخواست» Loading: false
در حین انجام درخواست» Loading: true
پس از دریافت درخواست» Loading: false
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد