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

Quote Project - Data Retrieval with Prop

0
53
Vue.JS 2: پروژه ی quote – پاس دادن داده ها با prop - قسمت 43

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

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

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

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

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

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

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

خصوصیت quote که یک رشته ساده است، مقدار تایپ شده توسط کاربر را دریافت خواهد کرد. حالا به قسمت 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 اجرا شود. این کار را در جلسه بعد انجام خواهیم داد.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید