فصل جدید، کار با فرم‌ها

Working with Forms

با سلام و خسته نباشید. به فصل جدید کار با فرم ها خوش آمدید. برای این فصل پروژه ساده ای را برایتان آماده کرده ام که باید آن را از این لینک دانلود کنید. این پروژه آماده یک فرم ساده HTML دارد که به شکل زیر است:

در قسمت پایین تر این پروژه نیز قسمتی را داریم که اطلاعات وارد شده در فرم را نمایش می دهد. این اطلاعات در ابتدا به محض تایپ کردن در این قسمت نمایش داده می شوند اما در انتهای این فصل کاری می کنیم که فقط با Submit کردن فرم نمایش داده شوند.

برای بررسی قابلیت های این فریم ورک به تک تک فیلدهای موجود در این متن مراجعه می کنیم و آن ها را با استفاده از vue کدنویسی خواهیم کرد. برای شروع با یک فیلد متنی ساده یعنی همین فیلد ایمیل شروع می کنیم. هدف ما این است که مقدار تایپ شده توسط کاربر را به یک خصوصیت درون برنامه متصل کنیم تا بعدا هر کاری که خواستیم با آن انجام دهیم (به طور مثال اعتبار سنجی کنیم). اگر به فایل app.Vue نگاه کنید متوجه می‌شوید که هیچ کامپوننتی در این برنامه وجود ندارد. ما تمام کارهای مربوط به این برنامه را درون فایل app.Vue انجام خواهیم داد. اولین کاری که باید انجام دهیم تعریف کردن data برای برنامه است. در همان ابتدا خصوصیتی به نام email را تعریف کنید که یک رشته خالی باشد.

<script>
export default {
  data() {
    return {
      email: ""
    };
  }
};
</script>

حالا سوال اینجاست که چطور خصوصیت email را به مقدار تایپ شده در فیلد توسط کاربر متصل کنیم. قبلا هم به شما توضیح داده بودم که برای این کار از two-way-binding یا همان خصوصیت v-model استفاده می کنیم. بنابراین به سادگی v-model را تعریف کرده و خصوصیات email را به آن متصل می کنیم:

<div class="form-group">
            <label for="email">Mail</label>
            <input type="text" id="email" class="form-control" v-model="email" />
          </div>

سوالی که مطرح می‌شود این است که چطور مطمئن شویم جهت اعمال تغییرات در two-way-binding جهت درست خواهد بود. به طور مثال فریم ورک vue از کجا می داند که ایجاد تغییرات از سمت کاربر است، یعنی از فیلد email، یا از سمت خود ما و در سورس کد؟ پاسخ این سوال ساده است. فریم ورک vue می تواند به صورت خودکار تشخیص دهد که این تغییرات از کجا اعمال شده اند. اگر منبع ایجاد تغییر از قسمت email باشد vue متوجه می شود که این تغییرات از سمت کاربر است و خصوصیت ما را override می کند اما اگر منبع تغییر درون سورس کد و توسط ما باشد متوجه می شود که باید مقدار موجود در input را به روز رسانی کند.

حالا به قسمت div با کلاس panel-body رفته و خصوصیت email را درون آن نمایش می دهیم تا زمانی که کاربر در آن فیلد چیزی را تایپ کرد آن را در قسمت نتایج نیز نشان دهیم:

<div class="panel-body">
<p>Mail: {{ email }}</p>
<p>Password:</p>
<p>Age:</p>
<p>Message:</p>
<p>
    <strong>Send Mail?</strong>
</p>
<ul>
    <li></li>
</ul>
<p>Gender:</p>
<p>Priority:</p>
<p>Switched:</p>
</div>

پس از ذخیره کردن کدها می توانیم به مرورگر مراجعه کنیم و برنامه را تست کنیم. اگر کدها را بدون نقص نوشته باشید، متوجه خواهید شد که با تایپ کردن درون فیلد email مقدار آن در قسمت panel-body نمایش داده می شود. تا اینجای کار عملیات خاصی را انجام نداده ایم بلکه با two-way-binding در قسمت های قبل از این سری آموزشی آشنا شده بودیم. من می‌خواهم سه فیلد اول فرم خودم را در یک گروه در قسمت data قرار بدهم یعنی فیلم های email و password و age. برای این کار به سادگی می توانیم به قسمت data درون تگ های script برویم و خصوصیات خود را درون یک شیء جداگانه ذخیره کنیم:

<script>
export default {
  data() {
    return {
      userData: {
        email: "",
        password: "",
        age: 27
      }
    };
  }
};
</script>

همانطور که مشاهده می کنید فیلد های email و password و age را درون یک شیء جداگانه به نام userData قرار داده ام. مقادیر email و password معمولاً به صورت رشته هستند بنابراین من نیز آن ها را یک رشته خالی قرار داده ام اما مقدار age یک عدد خواهد بود، به همین دلیل آن را با عدد ۲۷ پر کرده‌ام. طبیعتا این عدد در فرم نیز نمایش داده خواهد شد بنابراین زمانی که کاربر برای اولین بار فرم را باز کند عدد ۲۷ درون فیلد Age خواهد بود (البته کاربر میتواند بعداً خودش آن را تغییر دهد).

از آنجایی که سه فیلد اول خود را درون یک شی قرار داده ایم باید دستور v-model را بر اساس این شی تنظیم کنیم. برای این کار باید به جای گفتن email در v-model بگوییم userData.email:

<div class="form-group">
  <label for="email">Mail</label>
  <input type="text" id="email" class="form-control" v-model="userData.email" />
</div>

من بر اساس همین نکته دو فیلد دیگر را نیز با دستور v-model به خصوصیات متناظر آن ها در شیء userData متصل می کنم:

          <div class="form-group">
            <label for="email">Mail</label>
            <input type="text" id="email" class="form-control" v-model="userData.email" />
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" class="form-control" v-model="userData.password" />
          </div>
          <div class="form-group">
            <label for="age">Age</label>
            <input type="number" id="age" class="form-control" v-model="userData.age" />
          </div>

از آنجایی که تمام خصوصیات ما در سه فیلد اول درون شیء ای به userData قرار گرفته است باید در قسمت panel-body نیز این تغییرات را اعمال کنیم تا بتوانیم مقدار تایپ شده در فیلم های خود را درون panel-body نیز مشاهده کنیم، بنابراین:

<div class="panel-body">
  <p>Mail: {{ userData.email }}</p>
  <p>Password: {{ userData.password }}</p>
  <p>Age: {{ userData.age }}</p>
  <p>Message:</p>
  <p>
    <strong>Send Mail?</strong>
  </p>
  <ul>
    <li></li>
  </ul>
  <p>Gender:</p>
  <p>Priority:</p>
  <p>Switched:</p>
</div>

حالا برای تست کردن کدها به مرورگر می رویم توجه داشته باشید که دستور npm run dev در حال اجرا باشد اگر تمام کدها را به درستی نوشته باشید، درون مرورگر هیچ خطایی دریافت نمی کنید. همچنین در فیلد age عدد ۲۷ نمایش داده خواهد شد اما می توانید خودتان آن را به صورت دستی تغییر دهید.

در قسمت بعد به سراغ فیلدهای دیگر می رویم.