6. پروژه [vuejs-04]: دستورالعمل‌های [v-model, v-bind]، ویژگی‌های محاسبه‌شده، فرم ورود داده

ساختار پروژه برای [vuejs-04] به شرح زیر است:

6.1. اسکریپت اصلی [main.js]

این همانند مثال قبلی است.

6.2. کامپوننت اصلی [App]

کد برای [App.vue] به شرح زیر است:

<template>
  <b-container>
    <b-card>
      <!-- پیام مقدماتی -->
      <b-row>
        <b-col cols="8">
          <b-alert show variant="success" align="center">
            <h4>[vuejs-04] : directives [v-model, v-bind], attributs calculés, formulaire de saisie</h4>
          </b-alert>
        </b-col>
      </b-row>
      <Form />
    </b-card>
  </b-container>
</template>


<script>
  import Form from "./components/Form.vue";

  export default {
    name: "app",
    components: {
      Form
    }
  };
</script>

کامپوننت [App.vue] از کامپوننت جدید [Form] استفاده می‌کند (خطوط ۱۲، ۱۹، ۲۴).

6.3. کامپوننت [Form]

کد کامپوننت [Form] به شرح زیر است:

<template>
  <div>
    <!-- فرم -->
    <b-form>
      <!-- fields of the form -->
      <b-row>
        <b-col cols="4">
          <b-card bg-variant="light">
            <b-form-group label="Nombre d'enfants à charge" label-for="enfants">
              <b-input type="text"
                       id="enfants"
                       placeholder="Indiquez votre nombre d'enfants"
                       v-model="enfants"
                       v-bind:state="enfantsValide" />
              <b-form-invalid-feedback :state="enfantsValide">Vous devez saisir un nombre positif ou nul</b-form-invalid-feedback>
            </b-form-group>
            <!-- دکمه -->
            <b-button variant="primary" :disabled="formInvalide" @click="doSomething">Valider</b-button>
          </b-card>
        </b-col>
      </b-row>
    </b-form>
    <b-row class="mt-3">
      <b-col cols="4">
        <b-alert show variant="warning" align="center">
          <h4>enfants= {{enfants}}</h4>
        </b-alert>
      </b-col>
    </b-row>
  </div>
</template>

<!-- اسکریپت -->
<script>
  export default {
    // نام
    name: "Form",
    // ویژگی‌های ثابت مؤلفه
    data() {
      return {
        // تعداد فرزندان
        enfants: ""
      };
    },

    // ویژگی‌های محاسباتی
    computed: {
      // ویژگی [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // ویژگی [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // روش‌ها
    methods: {
      doSomething() {
        // تعداد فرزندان در زمان اعتبارسنجی مشخص است
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

خروجی بصری

نظرات

• خطوط ۴–۳۲: تگ <b-form> یک فرم Bootstrap را معرفی می‌کند؛
• خط ۶: تگ <b-row> یک ردیف را به فرم اضافه می‌کند؛
• خط ۷: تگ <b-col cols='4'> یک ستون را معرفی می‌کند که ۴ ستون بوت‌استرپ را در بر می‌گیرد؛
• خط ۸: تگ <b-card> [6] یک کارت Bootstrap را معرفی می‌کند، ناحیه‌ای که با یک حاشیه قاب‌بندی شده است؛
• خط ۹: تگ <b-form-group> گروهی از عناصر فرم مرتبط با یکدیگر را معرفی می‌کند. در اینجا، یک فیلد متنی (ویژگی [label]) [1] به یک فیلد ورودی (ویژگی [label-for]) متصل است. مقدار [label-for]، مقدار فیلد [id] در خط ۱۲ از فیلد ورودی است؛
• خطوط ۱۰–۱۴: تگ <b-input> [2] یک فیلد ورودی را معرفی می‌کند:
  • خط ۱۰: [type=’text’] نشان می‌دهد که می‌توان متن را در فیلد ورودی وارد کرد. ما می‌توانستیم [type=’number’] را با محدودیت‌های [min=’val1’ max=’val2’ step=’val3’] بنویسیم، زیرا انتظار داریم تعدادی فرزند داشته باشیم. ما از [type=’text’] برای نشان دادن نحوه اعتبارسنجی یک ورودی استفاده کرده‌ایم؛
  • خط ۱۲: ویژگی [placeholder] [3] پیامی را که در فیلد ورودی نمایش داده می‌شود، تعیین می‌کند، مادامی که کاربر چیزی وارد نکرده باشد؛
  • خط ۱۳: دستور [v-model] مقدار واردشده را به‌صورت دوطرفه با ویژگی [enfants]، در خط ۴۲، از کامپوننت پیوند می‌دهد:
    • هنگامی که مقدار وارد شده تغییر می‌کند، مقدار ویژگی [enfants] نیز تغییر می‌کند؛
    • وقتی مقدار ویژگی [enfants] تغییر می‌کند، مقدار واردشده نیز تغییر می‌کند، یعنی محتوای [2] تغییر می‌کند؛
    • نکته کلیدی که باید درک کرد این است که، به لطف مکانیزم توصیف‌شده در بالا، هنگامی که کاربر روی دکمه [Valider] [5] کلیک می‌کند، مقدار ویژگی [enfants] در خط ۴۲، مقداری است که در [2] وارد شده است؛
  • خط ۱۴: دستور [v-bind] یک پیوند بین، از یک سو، یک ویژگی از تگ <b-input> – در این مورد، ویژگی [state] – و از سوی دیگر، یک ویژگی از کامپوننت – در این مورد، [enfantsValide] در خط ۵۳ – برقرار می‌کند. ویژگی [enfantsValide] از این جهت منحصر به فرد است که یک تابع است که مقدار ویژگی را برمی‌گرداند. این نوع ویژگی به عنوان ویژگی محاسباتی شناخته می‌شود. ویژگی‌های محاسباتی را می‌توان در خصوصیت [computed] کامپوننت، در خط ۴۷ یافت. ویژگی‌های محاسباتی به همان شیوه‌ای استفاده می‌شوند که ویژگی‌های ایستا در تابع [data] استفاده می‌شوند: در خط 14، به جای [v-bind:state=’enfantsValide()’]، [v-bind:state=’enfantsValide’] بدون پرانتز نوشته می‌شود. علاوه بر این، هنگام خواندن [template]، امکان تمایز بین یک ویژگی محاسباتی و یک ویژگی ایستا وجود ندارد. برای این کار، باید کد اسکریپت کامپوننت را بررسی کنید؛
  • خط ۱۴: ویژگی [state] مشخص می‌کند که آیا مقدار وارد شده معتبر است یا نامعتبر: اگر [enfantsValide] مقدار [true] را بازگرداند، مقدار وارد شده معتبر در نظر گرفته می‌شود؛ در غیر این صورت، نامعتبر در نظر گرفته می‌شود. اسکرین‌شات بالا، کامپوننت [b-input] را زمانی نشان می‌دهد که تابع [enfantsValide] مقدار [false] را برمی‌گرداند؛
  • خط ۱۵: تگ <b-form-invalid-feedback> [4] زمانی که ورودی در [2] نامعتبر باشد، پیامی را نمایش می‌دهد. ویژگی [:state=’enfantsValide’] آن با ویژگی [v-bind:state=’enfantsValide’] در خط 14 یکسان است. دستور [v-bind] را می‌توان حذف کرد، اما علامت [:] باید حفظ شود. بنابراین پیام خطا زمانی ظاهر می‌شود که ویژگی [enfantsValide] روی [false] تنظیم شود؛
  • خط 16: پایان گروه عنصر <b-group>؛
  • خط ۱۸: دکمه [5] که برای تأیید ورود استفاده خواهد شد:
    • این دکمه آبی [variant=’primary’] خواهد بود؛
    • [:disabled="formInvalide"]: ویژگی [disabled] دکمه را فعال یا غیرفعال می‌کند. این ویژگی به ویژگی محاسبه شده [formInvalide] در خط ۴۹ متصل (v-bind) است؛
    • [@click="doSomething"]: هنگامی که کاربر روی دکمه کلیک می‌کند، متد [doSomething] در خط 59 اجرا خواهد شد؛
  • خطوط ۱۹–۲۲: بستن تگ‌های باز مختلف؛
  • خطوط ۲۳–۲۹: یک خط جدید در [template]. [class=’mt-3’] به [margin (m) top (t) égale à 3 spacers] اشاره می‌کند. [spacer] یک واحد فاصله‌گذاری Bootstrap است. این کلاس، فاصله‌گذاری [8] را در اسکرین‌شات بالا ایجاد می‌کند. بدون این کلاس، ناحیه [7] با ناحیه [1-6] هم‌تراز می‌شود؛
  • خط 24: ستونی که 4 ستون Bootstrap را در بر می‌گیرد؛
  • خطوط ۲۵–۲۷: یک هشدار [warning] که مقدار ویژگی استاتیک [enfants] (خط ۴۲) را نمایش می‌دهد. از آنجایی که این ویژگی با فیلد ورودی یک پیوند دوطرفه دارد، به محض اینکه کاربر فیلد را تغییر دهد، مقدار نمایش‌داده‌شده در هشدار نیز تغییر می‌کند؛
  • خطوط ۳۴–۶۵: کد کامپوننت jS؛
  • خط ۴۲: تنها ویژگی ایستا (static) کامپوننت؛
  • خطوط ۴۷–۵۶: ویژگی‌های محاسباتی کامپوننت؛
  • خطوط ۵۳–۵۵: ورودی در صورتی معتبر در نظر گرفته می‌شود که یک عدد صحیح مثبت باشد، که ممکن است قبل یا بعد از آن «فاصله‌ها» قرار داشته باشد؛
  • خطوط ۴۹–۵۱: فرم در صورتی معتبر در نظر گرفته می‌شود که ورودی تعداد فرزندان معتبر باشد. به طور کلی، یک فرم چندین فیلد دارد و در صورتی معتبر در نظر گرفته می‌شود که همه آن‌ها معتبر باشند؛
  • خطوط ۵۸–۶۳: متدهای کامپوننت که به رویدادهای آن پاسخ می‌دهند. در اینجا، تنها یک رویداد وجود دارد: [click] روی دکمه. ما به سادگی مقدار وارد شده را نمایش می‌دهیم تا نشان دهیم که واقعاً به آن دسترسی داریم؛

6.4. اجرای پروژه

فایل [package.json] را اصلاح کرده و پروژه را اجرا می‌کنیم: