اضافه‌کردن منطق دکمه‌ی Buy

حالا که Stock های خودمان را با موفقیت نمایش داده ایم، نوبت به پاس دادن مقادیر واقعی به آن ها می رسد. در حال حاضر هیچ مقداری واقعا از آرایه stocks به سمت هر stock ارسال نمی شود بلکه متن های عادی مانند PRICE و NAME را برای هر کدام قرار داده ایم. با این حساب مرحله اول پاس دادن هر کدام از اعضای آرایه stocks به هر stock است. برای این کار می توانیم از props استفاده کنیم که در فصل های اول با آن آشنا شدیم. در ابتدا به فایل Stocks.vue رفته و می گوییم:

<template>
  <div>
    <app-stock v-for="stock in stocks" :stock="stock"></app-stock>
  </div>
</template>

برای پاس دادن prop ها کافی بود نام دلخواه خود را انتخاب کرده و آن را به صورت یک attribute به کامپوننت مورد نظر بدهیم. البته یادتان باشد که حتما باید علامت دو نقطع (v-bind) را برایش گذاشته باشیم. در مرحله بعد به فایل Stock.vue می رویم و این prop را دریافت می کنیم:

<script>
export default {
  props: ["stock"]
};
</script>

حالا که stock را دریافت کرده ایم می توانیم به جای رشته های NAME و PRICE و غیره از مقادیر واقعی استفاده کنیم:

<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">
      {{stock.name}}
      <small>(price: {{stock.price}})</small>
    </h3>
  </div>
  <div class="panel-body">
    <div class="pull-left">
      <input type="number" class="form-control" placeholder="Quantity" />
    </div>
    <div class="pull-right">
      <button class="btn btn-success">Buy</button>
    </div>
  </div>
</div>

در کد بالا این مقادیر را با string interpolation نمایش داده ام. در مرحله بعد باید input و دکمه Buy را راه اندازی کنیم. برای این کار باید input خود را به یک خصوصیت در Data متصل کنیم اما هنوز شیء data را در این کامپوننت نداریم بنابراین آن را تعریف می کنیم:

<script>
export default {
  props: ["stock"],
  data() {
    return {
      quantity: 0
    };
  }
};
</script>

quantity (تعداد) به صورت پیش فرض روی صفر است. حالا باید این خصوصیت را با استفاده از v-model به input خودمان متصل کنیم بنابراین:

<div class="panel-body">
  <div class="pull-left">
    <input type="number" class="form-control" placeholder="Quantity" v-model="quantity" />
  </div>
  <div class="pull-right">
    <button class="btn btn-success">Buy</button>
  </div>
</div>

اگر کدها را به درستی نوشته باشید، پس از ذخیره آن ها و رفتن به مرورگر (npm run dev در حال اجرا باشد) باید عدد 0 را درون تمام input های صفحه stocks (آدرس http://localhost:8080/stocks) مشاهده کنید. بنابراین همه چیز به خوبی کار می کند. برای تکمیل کدها باید عملیات Buy یا خرید سهام را نیز کدنویسی کنیم. بیایید در ابتدا آن را فقط در کنسول چاپ کنیم. برای این کار من یک event listener از نوع click@ را برای دکمه buy تعریف می کنم که متدی به نام buyStock را اجرا کند:

<div class="panel-body">
  <div class="pull-left">
    <input type="number" class="form-control" placeholder="Quantity" v-model="quantity" />
  </div>
  <div class="pull-right">
    <button class="btn btn-success" @click="buyStock">Buy</button>
  </div>
</div>

این کد فعلا کار نمی کند چرا که اصلا متدی به نام buyStock وجود ندارد بنابراین باید آن را تعریف کنیم:

<script>
export default {
  props: ["stock"],
  data() {
    return {
      quantity: 0
    };
  },
  methods: {
    buyStock() {
      const order = {
        stockId: this.stock.id,
        stockPrice: this.stock.price,
        quantity: this.quantity
      };
      console.log(order);
      this.quantity = 0;
    }
  }
};
</script>

متد buyStock در ابتدا یک شیء به نام order را می سازد که حاوی سه key به نام های stockId (همان id هر Stock که از طریق prop ای به نام Stock پاس داده می شود)، stockPrice (قیمت هر stock که باز هم از prop دریافت می شود) و quantity (خصوصیت خودمان در data است و با v-model به input متصل است) می باشد. سپس این شیء را در کنسول مرورگر چاپ کرده ایم و نهایتا مقدار quantity را دوباره روی 0 گذاشته ایم تا ریست شود. حالا چرا آن را در کنسول چاپ کرده ایم؟ برای خرید واقعی نیاز به VueX داریم که در جلسات بعد آن را انجام خواهیم داد اما فعلا می خواهیم عملکرد این دکمه را تست کنیم تا مطمئن شویم به خوبی کار می کند. با ذخیره این کدها و مراجعه به مرورگر، باید تمام مقادیر NAME و PRICE با مقادیر واقعی پُر شده باشند. همچنین برای تست 10 سهم از شرکت BMW را می خرم تا ببینم آیا این خرید در کنسول چاپ می شود یا خیر:

همانطور که مشخص است همه چیز به درستی کار می کند و پس از خرید مقدار input دوباره صفر شده است. مشکلی که برنامه ما دارد این است که می توانیم 10- سهام بخریم! بنابراین باید یک اعتبارسنجی ساده را برای آن در نظر بگیریم. البته مشکل دیگر اینجاست که می توانیم بیشتر از funds (موجودی حساب) سهام بخریم اما از آنجایی که هنوز funds را تعریف نکرده ایم با آن و اعتبارسنجی اش کاری نداریم تا به جلسات مربوطه برسیم. فعلا برای جلوگیری از خرید سهامِ منفی می گوییم:

<div class="pull-right">
  <button
    class="btn btn-success"
    @click="buyStock"
    :disabled="quantity <= 0 || !Number.isInteger(quantity)"
  >Buy</button>
</div>

خصوصیت disabled روی این دکمه باعث غیر فعال شدن آن می شود. ما گفته ایم اگر quantity برابر با صفر یا از آن کوچک تر بود یا quantity یک عدد صحیح نبود، دکمه خرید را غیر فعال کن. شیء Number در جاوا اسکریپت متدی به نام isInteger دارد که مشخص می کند مقدار پاس داده شده، یک عدد صحیح است یا خیر. ما با علامت ! این شرط را برعکس کرده ایم تا اگر عدد نبود disabled برابر true شود. در حال حاضر اگر به مرورگر بروید، می بینید که تمام دکمه ها غیر فعال هستند چرا که quantity به صورت پیش فرض روی 0 است. همچنین اگر عددی منفی یا اعشاری (مانند 1.2) را وارد کنید، دکمه غیر فعال باقی می ماند.

در قسمت بعدی باید VueX را روی این پروژه نصب کنیم تا بتوانیم موجودی حساب داشته باشیم و خرید ها را ذخیره کنیم.