نحوه استفاده از دستور Vue’s v-for برای رندر کردن لیست ها را بیاموزید.
یکی از رایج ترین وظایف در توسعه وب، ارائه لیست داده ها است. Vue با کمک دستور v-for این کار را انجام می دهد. شما کشف خواهید کرد که دستورالعمل v-for چیست، چگونه موارد را از لیست حذف کنید، و چگونه لیست ها را با کلیدها ارائه کنید.
دستور v-for در Vue چیست؟
دستور v-for یکی از دستورالعمل های Vue است که به شما امکان می دهد لیست ها را با حداقل کد جاوا اسکریپت رندر کنید. دستور v-for مشابه حلقه for در جاوا اسکریپت کار میکند و میتواند روی آرایهها و اشیاء تکرار شود تا آیتمها را در یک لیست ارائه دهد.
برای استفاده از دستور v-for، آرایهای را ارائه کنید که میخواهید در ویژگی داده شی Options در Vue تکرار شود.
مثلا:
<template>
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
};
</script>
بلوک کد بالا نمونه ای از یک برنامه Vue را نشان می دهد که از دستور v-for برای تکرار روی آرایه نام هایی که در ویژگی داده ارائه شده است استفاده می کند.
v-for دارای مقداری است که برای یک عبارت با دو قسمت تنظیم شده است: متغیر تکرار (name) و نامها آرایههای v-for به نقاط. متغیر تکرار هر نام را در آرایه نام ها نگه می دارد و نام را نمایش می دهد.
Vue یک عنصر جدید Document Object Model (DOM) برای هر نام در آرایه نامها ایجاد میکند و آن را در صفحه وب ارائه میکند.
اگر آرایه نام ها تغییر کند (به عنوان مثال، یک نام جدید اضافه شود یا یک نام قدیمی حذف شود)، Vue به طور خودکار DOM مجازی را به روز می کند و لیست را دوباره ارائه می کند تا داده های به روز شده را منعکس کند.
Vue همچنین راهی برای دریافت شاخص یک عنصر در یک لیست ارائه می دهد.
<li v-for="(name,index) in names">{{ name }} -- {{ index }}</li>
کد بالا نحو نمایش شاخص هر نام را در آرایه نام ها نشان می دهد.
شما همچنین می توانید از دستور v-for برای حلقه زدن طیف وسیعی از اعداد استفاده کنید:
<li v-for="num in 10">Vue is Nice</li>
کد بالا فهرستی با متن Vue is Nice ده بار نمایش می دهد. دستور v-for همچنین میتواند از طریق طیفی از اعداد حلقه بزند تا دادهها را به طور مکرر نمایش دهد یا عملیاتی را انجام دهد. در این حالت از متغیر num iteration برای دسترسی به آیتم فعلی در لیست استفاده می شود.
چگونه موارد را از لیست در Vue حذف کنیم
می توانید به کاربران اجازه دهید موارد را از لیست های برنامه وب خود حذف کنند. این ویژگی هنگام ساخت برنامه هایی مانند لیست کارهای انجام شده مفید است.
میتوانید از متد جاوا اسکریپت splice (که یکی از روشهای حذف آیتمها از آرایهها است) برای حذف یک آیتم از فهرست Vue استفاده کنید.
array.splice(startIndex, numToRemove, newElements)
متد splice می تواند آیتم ها را از یک آرایه اضافه یا حذف کند. متد splice پارامترها را به ترتیب زیر می گیرد:
- پارامتر startIndex شاخصی را تعیین می کند که در آن شروع به اصلاح آرایه می شود.
- numToRemove تعداد مواردی را که می خواهید از آرایه حذف کنید را نشان می دهد.
- در نهایت پارامتر newElements که می توانید از آن برای اضافه کردن عناصر به آرایه استفاده کنید. اگر هیچ عنصری مشخص نشده باشد، splice() فقط عناصر را از آرایه حذف می کند.
برای استفاده از روش splice برای حذف یک آیتم از لیست Vue، باید شاخص آن آیتم را بدانید. یکی از راههای رسیدن به این هدف، ارسال ایندکس به عنوان آرگومان به روشی است که حذف آیتم را مدیریت میکند.
برای مثال، میتوانید یک دکمه در کنار هر نام در آرایه اضافه کنید که وقتی کاربر روی آن کلیک میکند، روشی را برای حذف آن فعال میکند:
<template>
<ul>
<li v-for="(name,index) in names">
{{ name }} -- {{ index }}
<button @click="removeItem(index)">Remove</button>
</li>
</ul>
</template>
پارامتر index به ما امکان دسترسی به فهرست هر نام در آرایه را می دهد که این برنامه به عنوان آرگومان به متد removeItem ارسال می کند. سپس متد removeItem می تواند از متد splice برای حذف یک نام از آرایه names استفاده کند:
<script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
methods: {
removeItem(index) {
this.names.splice(index, 1);
}
}
};
</script>
اسکریپت فوق از متد splice برای حذف یک نام از لیست نام های رندر شده استفاده می کند. این به طور خودکار لیست را در رابط کاربری به روز می کند تا آرایه به روز شده را منعکس کند.
نحوه رندر کردن لیست ها با کلیدها در Vue
ویژگی کلیدی یک ویژگی منحصر به فرد است که Vue برای ردیابی هویت هر آیتم در لیست استفاده می کند. هنگامی که یک مورد در لیست تغییر می کند، با کمک ویژگی کلیدی Vue می تواند به سرعت DOM را بدون ارائه مجدد کل لیست به روز کند.
بیایید نگاهی به مثالی از ارائه یک لیست با کلیدها در Vue بیندازیم:
<template>
<div>
<ul>
<li v-for="name in names" :key="name.id">
{{ name.name }}
<button @click="removeItem(name.id)">Remove</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
names: [
{ id: 1, name: "John"},
{ id: 2, name: "Doe"},
{ id: 3, name: "James"},
],
};
},
methods: {
removeItem(key) {
this.names.splice(key - 1, 1);
},
},
};
</script>
در این مثال، شما لیستی از آیتم ها با ویژگی های شناسه منحصر به فرد دارید. بلوک کد از ویژگی کلید با دستور v-for برای ردیابی هویت هر آیتم در لیست استفاده می کند. این به Vue اجازه میدهد تا زمانی که لیست تغییر میکند، DOM را بهطور مؤثر بهروزرسانی کند.
اگر بخواهید یک مورد را از لیست حذف کنید، Vue DOM را بدون نیاز به ارائه مجدد کل لیست به روز می کند. این به این دلیل است که Vue هویت هر آیتم را در لیست نگه میدارد و فقط میتواند مواردی را که تغییر کردهاند بهروزرسانی کند.
ویژگی کلید باید یک شناسه منحصر به فرد برای هر مورد در لیست باشد. این می تواند یک ویژگی id یا هر شناسه منحصر به فرد دیگری باشد که می تواند برای ردیابی مورد استفاده شود.
استفاده از ویژگی کلید با دستور v-for به جلوگیری از مشکلات رندر کمک می کند. به عنوان مثال، هنگام حذف نام ها، Vue از ویژگی کلید برای حفظ ترتیب موارد موجود در لیست استفاده می کند.
دستورالعمل های Vue ضروری هستند
در اینجا، شما اصول اولیه رندر لیست ها را در Vue پوشش دادید، از جمله حذف موارد از لیست ها و رندر لیست ها با کلید. شما می توانید با درک این مفاهیم، رابط های پاسخگو بسازید که لیست های داده های پیچیده را مدیریت می کند.
Vue دستورالعملهای زیادی برای اهداف مختلف دارد، از جمله رندر شرطی، اتصال رویداد و اتصال داده. درک این دستورالعمل ها می تواند به شما در ایجاد برنامه های وب تعاملی کارآمد کمک کند.