نمایش لیست‌ها با v-for

Display Lists with v-for

با سلام و خسته نباشید خدمت شما همراهان گرامی روکسو. در این قسمت از این سری آموزشی به سراغ نمایش لیست ها در صفحات HTML می رویم. برای شروع این جلسه من کدهای جدید را در اختیار شما قرار می دهم. کدهای HTML به شکل زیر:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

</div>

و کدهای جاوا اسکریپت به شکل زیر هستند:

new Vue({
    el: '#app',
  data: {
    ingredients: ['meat', 'fruit', 'cookies'],
    persons: [
        { name: 'Max', age: 27, color: 'red' },
      { name: 'Anna', age: 'unknown', color: 'blue' }
    ]
  }
});

همانطور که می بینید چیز خاصی در قسمت data ندارم: یک خصوصیت به نام ingredients که آرایه ای را در خود دارد و همچنین خصوصیت دیگری به نام persons که یک آرایه با دو عضو (از نوع شیء) می باشد. ما می خواهیم مقادیر ذکر شده را به صورت یک لیست در صفحه خودمان نشان بدهیم اما نمی خواهیم آن ها را به صورت دستی کدنویسی کنیم. چرا؟ دو دلیل اصلی:

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

انجام این کار با Vue بسیار ساده خواهد بود. دستوری به نام v-for وجود دارد که دقیقا یک حلقه For است و به ما اجازه می دهد که عنصر دارای v-for را به تعداد نیاز تکرار کنیم. به مثال زیر توجه کنید:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <ul>
    <li v-for="ingredient in ingredients">{{ingredient}}</li>
    </ul>
</div>

در کد بالا یک تگ li داریم که از دستور v-for روی آن استفاده کرده ایم. مقداری که به v-for پاس داده ام به شرح زیر است:

مثل یک حلقه for عادی در ابتدا باید نامی برای هر یک از آیتم های حلقه انتخاب کنید؛ یعنی زمانی که حلقه روی آیتم های آرایه اجرا می شود، هر آیتم به صورت یک متغیر با همین نام انتخاب شده در دسترس ما خواهند بود (این مطالب مربوط به جاوا اسکریپت است). من نام ingredient را انتخاب کرده ام اما شما می توانید هر نام دیگری را برایش قرار بدهید.
کلیدواژه in پایه ثابت و غیر قابل تغییر است.
در نهایت ingredients (به صورت جمع) اشاره به همان خصوصیتی می کند که درون data نوشته شده است بنابراین باید عینا با آن همنام باشد.

حالا اگر کد بالا را اجرا کنید خروجی زیر را دریافت خواهید کرد:

Meat
Fruit
cookies

به همین راحتی می توانیم لیست خود را نمایش دهیم.

سوالی که پیش می آید اینجاست که اگر بخواهیم علاوه بر خود آیتم (مثل meat یا fruit و ...) موقعیت یا ایندکس آن را نیز نمایش بدهیم باید چه کار کنیم؟ مثلا فرض کنید می خواهم روبروی هر کدام از آیتم های لیست، یک پرانتز بگذارم و ایندکس آن آیتم را درون آن نمایش دهم. چیزی شبیه به کد زیر:

<div id="app">
    <ul>
    <li v-for="ingredient in ingredients">{{ingredient}} ({{i}})</li>
    </ul>
</div>

پرانتزها متن عادی هستند و خیال نکنید که در حال اجرای syntax خاصی هستیم. i قرار است همان index ما باشد اما تعریف نشده است. چطور آن را تعریف کنیم؟ برای انجام این کار باید syntax مربوط به حلقه For را به شکل زیر ویرایش کنیم:

<div id="app">
    <ul>
        <li v-for="(ingredient, i) in ingredients">{{ingredient}} ({{i}})</li>
    </ul>
</div>

یعنی باید نام آیتم را درون پرانتز قرار داده و به عنوان پارامتر بعدی، یک نام را برای index انتخاب کنید که من i را انتخاب کرده ام. نام هر دو پارامتر ingredient یا i کاملا سلیقه ای و بسته به انتخاب شما است اما ترتیب آن ها مهم است؛ اولین نام (هر چه که باشد) اشاره به خود آیتم و دومین نام اشاره به index آن خواهد کرد.

البته اینطور نوشتن دستور v-for ما را محدود می کند چرا که باید از index و مقدار هر آیتم، یکجا استفاده کنیم. مثلا اگر بخواهیم کدها را به شکل زیر بنویسیم چطور؟

<div id="app">
    <ul>
        <li v-for="(ingredient, i) in ingredients">{{ingredient}} ({{i}})</li>
    </ul>
    <h1>{{ ingredient }} </h1>
    <p>{{ index}} </p>
</div>

برای استفاده از index و heading (نام های انتخابی من) به صورت بالا و جداگانه باید از یک template استفاده کنیم!

<div id="app">
    <ul>
        <li v-for="(ingredient, i) in ingredients">{{ingredient}} ({{i}})</li>
    </ul>
    <template v-for="(ingredient, index) in ingredients">
        <h1>{{ ingredient }} </h1>
        <p>{{ index}} </p>
    </template>
</div>

همانطور که قبلا هم گفته بودم تگ <template> که از تگ های HTML5 است در DOM نمایش داده نمی شود (به طور کل render نمی شود نه اینکه مخفی باشد) بنابراین می توانیم از آن استفاده کنیم و همه چیز را در یک تگ template قرار دهیم. حالا به راحتی به ingredient و index دسترسی دارم و خروجی کد من به شکل زیر خواهد بود:

امیدوارم این قسمت درک خوبی نسبت به حلقه های For در فریم ورک Vue به شما داده باشد. احتمالا هنوز نمی دانید که فایده قسمت persons در data برنامه چیست اما نگران نباشید در قسمت های بعدی که کار ترکیبی با آرایه ها و اشیاء را خواهیم داشت به سراغ آن ها نیز می رویم و از syntax های بیشتری استفاده خواهیم کرد. در این جلسه سعی شما بر این باشد که نحوه استفاده از v-for را یاد گرفته و قابلیت های آن را درک کنید.