مقدمه بر vue قسمت پنجم (طراحی فرم)

یکی از مزیت های استفاده از فریم ورک vue نسبت به روش های سنتی طراحی، در لحظه بودن تغییرات است. در روش سنتی فرض کنید تعدادی عنصر ورودی بر روی فرم دارید ابتدا داده در هر کدام از عناصر وارد می شود زمانی که دکمه بر روی فرم فشرده می شود باید تک تک عناصر را چک کنیم و مقدار هر کدام را دریافت کنیم. مثال برای عنصرها input، select باید مقدار خصوصیت value این عناصر را دریافت کنیم. برای عناصر مانند radio ، یا checkbox باید مقدار خصوصیت checked را بخوانیم. از طرف دیگر اگر بخواهید مقادیر ارسالی از سمت سرور را بر روی فرم نشان دهیم باید عمل معکوس را انجام دهیم.

اما در روش جدید هر عنصر را به یک متغییر پیوند دهیم با وارد کردن داده‌ها در عناصر مقدار متغییر به صورت خودکار تغییر می کند از طرف دیگر با تغییر مقدار متغییر ها داده‌های موجود در عنصر اصلاح می شود.

به مثال زیر توجه کنید:

قسمت template

خط ۶- یک عنصر از نوع input ایجاد می شود با استفاده از دستور v-model این ورودی را به متغییر inputText متصل می کند. زمانی که مقداری درون ورودی تایپ می شود مقدار به صورت خودکار به درون متغییر منتقل می شود و برعکس با تغییر مقدار متغییر inputText مقدار درون عنصر input عوض می شود.

خطوط ۹،۱۱،۱۳- سه عنصر ورودی از نوع checkbox ایجاد کرده‌ایم و آن ها را به متغییر به نام checkNames متصل می کنیم. این متغییر از نوع آرایه است و هر ورودی که تیک خورد نام آن درون آرایه قرار می گیرد.

خطوط ۱۹، ۲۲- دو عنصور از نوع radiobox ایجاد می شود به متغییر picked متصل می شود هر کدام از رادیو ها انتخاب شود مقدار value‌ آن درون متغییر picked قرار می گیرد.

منبع

برای مطالعه ببشتر در مورد فرم ها می توانید به لینک زیر مراجعه کنید

کد این پست را می توانید از لینک زیر دریافت کنید: