اما شاید بخواهیم خطا را در سطح کلی تری بررسی کنیم نه فقط در سطح value، به همین خاطر از نوشتن value صرف نظر کرده ام. در مرحله ی بعد به سراغ خود input رفته و رویداد blur را روی آن صدا زده ام. سپس مثل دفعات قبل عمل کرده ام اما این بار each$ را داریم و باید index را به آن پاس بدهیم. در نظر داشته باشید که دلیل استفاده از each، پویا بودن این آرایه و فرم است. فرم ما طوری طراحی شده است که input ها به صورت پویا و به ازای کلیک کاربر ساخته می شوند و ما نمی دانیم چند input خواهیم داشت. اینجاست که each$ به کمک ما می آید. در نهایت یک تگ
را به فرم اضافه کرده ام که بر اساس minLen آرایه ی hobbyInputs نمایش داده می شود (با یک v-if) و به کاربر می گوید که باید حداقل X تعداد hobby داشته باشد، به طوری که X برابر با همان minLength است که ما آن را روی 1 عضو گذاشته بودیم. البته اگر به مرورگر برویم این خطا را مشاهده نمی کنیم. چرا؟ در حالت عادی هیچ فیلد input ای نداریم مگر آنکه کاربر روی دکمه ی Add Hobby کلیک کند. از طرفی کد های اعتبارسنجی ما درون این قسمت از فرم وجود دارد که به صورت پویا ساخته می شود بنابراین در حالت اولیه، اصلا اعتبارسنجی وجود ندارد. اعتبارسنجی فقط زمانی اجرا می شود که کاربر روی Add Hobby کلیک کند. از طرفی اگر روی Add Hobby کلیک کند نیز یک فیلد input ساخته است که شرط ما را برقرار می کند (حداقل یک عضو) بنابراین هیچ وقت خطایی نمی بینیم. برای حل این مشکل من minLen را روی 2 می گذارم: