ویو جی اس ایجاد عملیات همگام
سلام
من برای فرانت پروژم از ویو استفاده کردم اما ایرادی که وجود داره اینه که یه موردشو برای صفحه محصولات میگم.
من اطلاعات محصولاتو با axios میخونم و در یه متغیری میریزم و لیستو نشون میدم .
من تو تمپلیت کامپوننت محصولات با دایرکتیو v-if مقدار متغیری که با axiosخونده میشه رو برسی کردم که اگه محصولی یافت نشد بیا یه پیام نشون بده بگو محصولی برای نمایش نیست و بعد این المنت لیست محصولات نمایش داده میشه.
مشکل اینه که این پیام در حالتی که محصولات وجود هم داشته باشه در ابتدا به مدت دو ثانیه نشون داده میشه بعد دو ثانیه مخفی میشه و بعد لیست محصولات نشون داده میشه. وقتی محصولی وجود داره انصافا نباید این پیام نشون دهده بشه چطور میشه جلوی نمایش بیخود این پیامو گرفت؟؟
شاید مربوط به اجرای ناهمگام جاوا اسکریپت باشه که منتظر کامل شدن اجرای درخواست axios نمیمونه و با مقادیر خالی متغیر محصولات شرطو چک میکنه.
اگه مربوط به عملیات ناهمگام است میتونید راهنمایی بفرمایید؟؟
پاسخها
4
سلام از لودینگ استفاده کردم ولی من از یه روش بهتری استفاده کردم
من برای نمایش پیام محصولی یافت نشد یه متغییر جداگانه تعریف کردم که مقدارشو در ابتدا false در نظر گرفتم تا پیام نشون داده نشه و مقدار این متغییر فقط زمانی بروزرسانی میشه که جواب کوئری من از سرور دریافت بشه و اگر محصولی یافت شد که مقدارش همچنان false باقی می ماند و تغییری نمی کند اگر هم محصولی یافت نشد مقدارش true میگردد و پیام نشون داده می شود. ما این برسی شرطو داخل قسمت then درخواست با axios قرار می دهیم با این روش دیگه هرگز برای یک ثانیه هم اون پیام بی علت و بدون منطق و مدریت ما نشون داده نمی شود و صدرصد کاربردیس.
شما در حالت لودینگ هیچی رو نشون نمیدین، میتونین یه متغیر به اسم loaded داشته باشین که پیشفرض false باشه، تا وقتی که false باشه یه المنت دیگه رو نمایش بدین و هر وقت true شد چیزایی که گفتین رو نشون بدین.
بعد لود اگه آرایه محصولات خالی بود اون پیام رو نشون میدین، اگه خالی نبود هم که لیست محصولات نشون داده میشه.
این چیزی که دوستمون گفت درسته اگر المنت رو داری باید اینجوری عمل کنی ولی
اگر اطلاعات شما از متغییر خونده میشه یعنی همون "اگه محصولی یافت نشد بیا یه پیام نشون بده"
میتونی از v-cloak برای مخفی کردن استفاده کنی و توی استایل ها display:none قرار بدی تا موقعی که اطلاعات رو دریافت کنی.
[v-cloak] {
display: none;
}
<p v-if="loading" v-cloak>Loading</p>گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد