Vue v-for bilan komponentlar
Komponentlardan bir xil turdagi ko‘plab elementlarni yaratish uchun v-for bilan qayta foydalanish mumkin.
Komponentdan v-for yordamida elementlar yaratishda prop’larni massivdagi qiymatlar asosida dinamik ravishda tayinlash mumkinligi ham juda foydali.
v-for bilan komponent elementlarini yarating
Endi biz oziq-ovqat nomlari bilan massiv asosida v-for bilan komponent elementlarini yaratamiz.
Misol
App.vue:
<template>
<h1>Food</h1>
<p>Components created with v-for based on an array.</p>
<div id="wrapper">
<food-item
v-for="x in foods"
v-bind:food-name="x"/>
</div>
</template>
<script>
export default {
data() {
return {
foods: ['Apples','Pizza','Rice','Fish','Cake']
};
}
}
</script>FoodItem.vue:
<template>
<div>
<h2>{{ foodName }}</h2>
</div>
</template>
<script>
export default {
props: ['foodName']
}
</script>v-bind stenografiya
Prop’larni dinamik bog‘lash uchun v-bind-dan foydalanamiz va endi v-bind-dan avvalgidan ko‘ra ko‘proq foydalanishimiz sababli, ushbu darslikning qolgan qismida v-bind: ning qisqa shakli bo‘lgan : dan foydalanamiz.
"Kalit" atributi
Agar elementlar v-for bilan yaratilgandan keyin massivni o‘zgartirsak, Vue v-for bilan yaratilgan bunday elementlarni yangilash usuli tufayli xatolar paydo bo‘lishi mumkin. Vue unumdorlikni optimallashtirish uchun elementlardan qayta foydalanadi, shuning uchun biror elementni olib tashlasak, barcha elementlarni qayta yaratish o‘rniga allaqachon mavjud elementlar qayta ishlatiladi va element xususiyatlari endi to‘g‘ri kelmasligi mumkin.
Elementlarning noto‘g‘ri qayta ishlatilishining sababi shundaki, elementlarning noyob identifikatori yo‘q va biz aynan shu maqsadda kalit atributidan foydalanamiz: Vue elementlarni bir-biridan ajratish imkonini beradi.
Biz asosiy atributsiz noto‘g‘ri xatti-harakatlarni yaratamiz, lekin avval ko‘rsatish uchun v-for yordamida oziq-ovqatlar bilan veb-sahifa yarataylik: taom nomi, tavsifi, sevimli taom uchun rasm va sevimli holatni o‘zgartirish tugmasi.
Misol
App.vue:
<template>
<h1>Food</h1>
<p>Food items are generated with v-for from the 'foods' array.</p>
<div id="wrapper">
<food-item
v-for="x in foods"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"/>
</div>
</template>
<script>
export default {
data() {
return {
foods: [
{ name: 'Apples',
desc: 'Apples are a type of fruit that grow on trees.',
favorite: true },
{ name: 'Pizza',
desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.',
favorite: false },
{ name: 'Rice',
desc: 'Rice is a type of grain that people like to eat.',
favorite: false },
{ name: 'Fish',
desc: 'Fish is an animal that lives in water.',
favorite: true },
{ name: 'Cake',
desc: 'Cake is something sweet that tastes good.',
favorite: false }
]
};
}
}
</script>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
}
#wrapper > div {
border: dashed black 1px;
flex-basis: 120px;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>FoodItem.vue:
<template>
<div>
<h2>
{{ foodName }}
<img src="/img_quality.svg" v-show="foodIsFavorite">
</h2>
<p>{{ foodDesc }}</p>
<button v-on:click="toggleFavorite">Favorite</button>
</div>
</template>
<script>
export default {
props: ['foodName','foodDesc','isFavorite'],
data() {
return {
foodIsFavorite: this.isFavorite
}
},
methods: {
toggleFavorite() {
this.foodIsFavorite = !this.foodIsFavorite;
}
}
}
</script>
<style>
img {
height: 1.5em;
float: right;
}
</style>Bizga kalit atributi kerakligini bilish uchun massivdagi ikkinchi elementni olib tashlaydigan tugma yarataylik. Bu sodir bo‘lganda, asosiy atributsiz sevimli tasvir "Fish" elementidan "Cake" elementiga o‘tkaziladi va bu to‘g‘ri EMAS:
Misol
Oldingi misoldan yagona farq shundaki, biz tugmachani qo‘shamiz:
<button @click="removeItem">Remove Item</button>va metod:
methods: {
removeItem() {
this.foods.splice(1,1);
}
}App.vue-da.
Misolni ishga tushirish »Yuqorida aytib o‘tilganidek: element olib tashlanganida sevimli tasvirning "baliq" dan "tort" ga o‘zgarishi bu xato Vue elementlarni qayta ishlatish orqali sahifani optimallashtirish bilan bog‘liq va shu bilan birga Vue elementlarni bir-biridan to‘liq ajrata olmaydi. Shuning uchun biz har doim v-for bilan elementlarni yaratishda har bir elementni alohida belgilash uchun asosiy atributni kiritishimiz kerak. Key atributidan foydalanganda biz endi bu muammoga duch kelmaymiz.
Biz massiv elementi indeksini asosiy atribut qiymati sifatida ishlatmaymiz, chunki massiv elementlari olib tashlanganida va qo‘shilganda u o‘zgaradi. Biz har bir element uchun ID raqami kabi noyob qiymatni saqlab qolish uchun yangi ma’lumotlar xususiyatini yaratishimiz mumkin, ammo oziq-ovqat mahsulotlari allaqachon noyob nomlarga ega bo‘lgani uchun biz undan foydalanishimiz mumkin:
Misol
v-for bilan yaratilgan har bir elementni noyob tarzda aniqlash va muammoni hal qilish uchun App.vue-ga faqat bitta qator qo‘shishimiz kerak:
<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
/>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!