پروژه Quote – تکمیل ثبت Quote

Quote Project - Complete Quote Registration

ما در قسمت قبل توانستیم با موفقیت یک textarea را بسازیم تا کاربر quote های مورد نظر را در آن بنویسد. همچنین ما از two-way-binding استفاده کردیم و به راحتی مقدار تایپ شده توسط کاربر را در خصوصیتی به نام quote ذخیره می کنیم. به این کد از جلسه قبل نگاه کنید:

 <template>
  <div class="row">
    <form>
      <div class="col-sm-8 col-sm-offset-2 col-xs-12 col-md-6 col-md-offset-3 form-group">
        <label>Quote</label>
        <textarea class="form-control" rows="3" v-model="quote"></textarea>
      </div>
      <div class="col-sm-8 col-sm-offset-2 col-xs-12 col-md-6 col-md-offset-3 form-group">
        <button class="btn btn-primary" @click.prevent="createNew">Add Quote</button>
      </div>
    </form>
  </div>
</template>

این کد را در فایل NewQuote.vue نوشته ایم. کامپوننتی که مخصوص اضافه کردن quote ها است. همانطور که در کدهای بالا مشاهده می شود فقط یک کار باقی مانده است: تعریف کردن متد createNew برای ثبت نهایی است. من می خواهم از یک custom event استفاده کنم تا این quote را به آن اضافه کنیم. در جلسات قبل با custom event ها آشنا شدیم بنابراین تکرار مکررات نمی کنم.

<script>
export default {
  data: function() {
    return {
      quote: ""
    };
  },
  methods: {
    createNew() {
      this.$emit("quoteAdded", this.quote);
      this.quote = "";
    }
  }
};
</script>

همانطور که می بینید تعریف کردن این متد آنقدر ها هم مشکل نیست. ابتدا باید نام دلخواهی را برای custom event خود انتخاب نمایید که من quoteAdded را انتخاب کرده ام. سپس باید this.quote را به همراه آن ارسال کنیم. This.quote همان مقداری است که کاربر درون textarea تایپ می کند. از طرفی از آنجایی که ما از two-way-binding استفاده می کنیم، باید پس از emit کردن این custom event مقدار درون this.quote را ریست و خالی کنیم. چرا؟ به دلیل اینکه ما از two-way-binding استفاده کرده ایم بنابراین اگر مقدار آن را خالی نکنیم، پس از ثبت quote (کلیک روی دکمه Add Quote) مقدار تایپ شده توسط کاربر درون textarea باقی می ماند که از نظر UI و UX بسیار زشت و زننده است چرا که کاربر پس از اضافه کردن یک quote برای اضافه کردن Quote بعدی باید خودش به صورت دستی مقدار قبلی را از Textarea پاک کند.

حالا می توانیم به App.vue برویم و این کامپوننت را ثبت کنیم.در ابتدا newQuote را وارد App.vue می کنیم. سپس آن را به کامپوننت های خود در App.vue اضافه می کنیم تا به عنوان یک کامپوننت محلی ثبت شود:

<script>
import QuoteGrid from "./components/QuoteGrid.vue";
import NewQuote from "./components/NewQuote.vue";

export default {
  data: function() {
    return {
      quotes: ["Just a Quote to see something"],
      maxQuotes: 10
    };
  },
  components: {
    appQuoteGrid: QuoteGrid,
    appNewQuote: NewQuote
  }
};
</script>

سپس در قسمت Template آن را اضافه می کنیم:

<template>
  <div class="container">
    <app-new-quote></app-new-quote>
    <app-quote-grid :quotes="quotes"></app-quote-grid>
  </div>
</template>

در حال حاضر اگر مرورگر را باز کنید textarea و دکمه Add Quote را خواهیم دید اما هنوز به رویداد emit شده گوش نمی دهیم که واقعا کامپوننتی را اضافه کنیم. برای حل این مشکل می توان کد بالا را به صورت زیر ویرایش کرد:

<template>
  <div class="container">
    <app-new-quote @quoteAdded="newQuote"></app-new-quote>
    <app-quote-grid :quotes="quotes"></app-quote-grid>
  </div>
</template>

یعنی به quoteAdded گوش می دهیم و هر زمان که اجرا شد متدی به نام newQuote را اجرا می کنیم. حالا در همین فایل App.vue قسمت methods را تعریف کرده و می گوییم:

export default {
  data: function() {
    return {
      quotes: ["Just a Quote to see something"],
      maxQuotes: 10
    };
  },
  methods: {
    newQuote(quote) {
      this.quotes.push(quote);
    }
  },
  components: {
    appQuoteGrid: QuoteGrid,
    appNewQuote: NewQuote
  }
};

توضیحات کد بالا:

همانطور که می دانید زمانی که رویداد quoteAdded ارسال یا emit می شود، داده هایی نیز همراهش ارسال خواهد شد (ما this.quote را ارسال کرده بودیم بنابراین خود quote ارسال می شود) به همین دلیل می توانیم آن را به عنوان آرگومان دریافت کنیم. در ادامه نیز گفته ام که quote جدید را به آرایه quotes اضافه کن.

نکته: ما می توانیم مقدار پاس داده شده به همراه event را به شکل زیر نیز دریافت کنیم:

    <app-new-quote @quoteAdded="newQuote($event)"></app-new-quote>

اما از آنجایی که Vue خودش این کار را انجام می دهد، نوشتن آن اضافه کاری است.

حالا اگر به مرورگر بروید و کدها را تست نمایید، برنامه بدون هیچ مشکلی کار می کند. به عبارت دیگر می توانید هر چقدر خواستید quote اضافه کنید. البته توجه داشته باشید که هنوز هیچ منطقی را برای محدود کردن تعداد quote ها برنامه ریزی نکرده ایم بنابراین تعداد حداکثر quote ها نامحدود است. قبل از تمام کردن این جلسه می خواهم قسمت info پایین صفحه را نیز کدنویسی کنیم و نهایتا کل برنامه را در قسمت بعد تکمیل می کنیم.

برای این کار وارد فایل App.vue شده و کدهای ساده HTML را درون آن می نویسیم:

<template>
  <div class="container">
    <app-new-quote @quoteAdded="newQuote"></app-new-quote>
    <app-quote-grid :quotes="quotes"></app-quote-grid>
    <div class="row">
      <div class="col-sm-12 text-center">
        <div class="alert alert-info">Info: Click on a Quote to delete it!</div>
      </div>
    </div>
  </div>
</template>

در کد بالا ابتدا یک row را اضافه کرده ام. ما درون container های بوت استرپ row می گذاریم چرا که بخشی از طراحی grid بوت استرپ است. اگر با بوت استرپ آشنایی ندارید به دوره آن در آکادمی روکسو مراجعه کنید. سپس یک div با کلاس col-sm-12 را به آن داده ام. با این کار div ما تمام عرض صفحه را می گیرد (البته دقیق تر این است که بگوییم تمام عرض container را می گیرد). همچنین من می خواهم این info در وسط صفحه باشد و کلاس text-center باعث وسط چین شدن متون می شود.

اگر از کلاس alert به صورت خالی استفاده کنید، باکس ظاهر شده در مرورگر قرمز می شود اما کلاس alert-info باعث نمایش یک باکس آبی روشن خواهد شد. متن این info نیز ساده است:

Info: Click on a Quote to delete it!

ترجمه این جمله در فارسی برابر است با:

نکته: برای حذف نقل قول ها روی آن ها کلیک کنید.

در جلسه بعد ابتدا روی حذف کردن quote ها تمرکز می کنیم. برای حذف کردن آن ها باید کاری کنیم که quote ها قابل کلیک کردن باشند و سپس اگر روی آن ها کلیک شد، به آرایه quotes دسترسی پیدا کرده و عنصر مورد نظر خود را از آن حذف کنیم.