پروژه Quote – پاس‌دادن داده‌ها با Prop

Quote Project - Data Retrieval with Prop

حالا که کامپوننت quote.vue را ساخته ایم و حالا باید بین آرایه quotes گردش کرده و برای هر عضو یک بار از quote.vue استفاده کنیم. برای انجام چنین کاری طبیعتا باید ابتدا quote.vue را وارد QuoteGrid.vue کنیم بنابراین وارد این فایل شده و می گوییم:

<script>
import Quote from "./Quote.vue";

export default {
  props: ["quotes"],
  components: {
    appQuote: Quote
  }
};
</script>

به زبان ساده ابتدا Quote.vue را وارد این فایل کرده و سپس آن را به عنوان یک کامپوننت محلی ثبت کرده ایم (خصوصیت components در شیء export شده). حالا کار گردش بین quotes ساده تر شده است و می توانیم این کار را به شکل زیر در قسمت template همین فایل انجام بدهیم:

<template>
  <div class="row">
    <app-quote v-for="quote in quotes">{{ quote }}</app-quote>
  </div>
</template>

این ساختار ساده دستور v-for است که در جلسات اولیه این دوره در مورد آن صحبت کرده ایم. در کد بالا quote می شود هر عضو آرایه quotes (دریافتی از props) در هر گردش. همچنین quotes همان آرایه quotes دریافتی از props است. ما به ازای هر عضو در quotes یک بار گردش کرده و آن عضو را درون کامپوننت app-quote (فایل quote.vue) نمایش می دهیم.

در نهایت باید props را از سمت فایل app.vue ارسال کنیم که در این قسمت دریافت شوند بنابراین به این فایل بروید و به شکل زیر عمل کنید:

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

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

من در ابتدا کامپوننت qouteGrid.vue را وارد این فایل کرده ام و آن را در components به صورت کامپوننت محلی ثبت کرده ام. حالا می توانیم در قسمت template آرایه quotes را به صورت prop پاس بدهیم:

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

در حال حاضر اگر به مرورگر بروید، یک quote را مشاده خواهید کرد بنابراین تا اینجای کار را درست آمده ایم. در قدم بعد باید کاری کنیم که بتوانیم quote های جدیدی را اضافه کنیم. من وارد پوشه components شده و فایل جدیدی به نام NewQuote.vue را می سازم. این فایل ساختار همیشگی و اولیه کامپوننت های Vue را خواهد داشت بنابراین این ساختار را به آن اضافه کنید:

<template></template>

<script>
export default {
    
};
</script>

<style>
</style>

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

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

خصوصیت quote که یک رشته ساده است، مقدار تایپ شده توسط کاربر را دریافت خواهد کرد. حالا به قسمت Template می رویم و یک فرم در آن ایجاد می کنیم:

<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>

همانطور که در کد بالا مشخص است از کلاس های بوت استرپ مختلفی استفاده کرده ایم. این کلاس ها به ما کمک می کنند تا برنامه در صفحات بزرگ و کوچک (کامپیوتر و موبایل و غیره) به بهترین شکل ممکن نمایش داده شود. من در این کد تگ های form را گذاشته ام و سپس درون آن دو قسمت یا دو div اصلی داریم که هر کدام یک form-group هستند. قسمت اول یا div اول مربوط به textarea ما است که کاربر در آن تایپ خواهد کرد. من با استفاده از دستور v-model آن را به خصوصیت quote در همین فایل متصل کرده ام (همان two-way-binding ای که گفتیم). قسمت دوم یا div دوم مربوط به دکمه ثبت quote است که به صورت Add Qoute نمایش داده می شود. کاربر پس از نوشتن quote مورد نظر خود باید روی این دکمه کلیک کند تا Qoute خود را ثبت نماید.

اگر دقت کنید من از یک listener ساده استفاده کرده ام (click@) اما modifier ای به نام prevent را به آن اضافه کرده ام. چرا؟ به دلیل اینکه رفتار پیش فرض فرم ها در HTML بدین صورت است که پس از ثبت هر فرم، صفحه refresh خواهد شد. فرم های HTML برای کار با back-end و زبان هایی مانند PHP توسعه داده شده اند بنابراین عادت دارند که refresh شده و اطلاعات را به سرور ارسال کنند. ما در اینجا سرور back-end ای نداریم که داده ها را تحلیل کند و کل برنامه جاوا اسکریپتی است بنابراین با اضافه کردن prevent از refresh شدن صفحه جلوگیری کرده ایم. ما قبلا در مورد prevent و modifier های دیگر صحبت کرده بودیم و می دانیم که prevent معادل preventDefault در جاوا اسکریپت عادی است.

همچنین مشخص است که با کلیک روی دکمه Add Quote باید متدی به نام createNew اجرا شود. این کار را در جلسه بعد انجام خواهیم داد.