کامپوننت های v-for (v-for Components)

اینجا «v-for» یعنی تکرارگر (Looper). با آن از روی آرایه، چند کامپوننت می سازیم. «کامپوننت (Component)» یک تکه UI قابل استفاده مجدد است. همچنین با «پراپس (Props)» می توانیم مقدار هر مورد را پویا بدهیم.

1) ساخت چند کامپوننت با v-for

بر اساس یک آرایه از نام غذاها، چند food-item می سازیم. سپس مقدار را با v-bind به پراپس می دهیم. این شبیه لیست حضور و غیاب است.

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

مشاهده در ادیتور

<template>
  <div>
    <h2>{{ foodName }}</h2>
  </div>
</template>

<script>
export default {
  props: [
    "foodName"
  ]
};
<\/script>

مشاهده در ادیتور

2) خلاصه v-bind

برای اتصال پویا از v-bind: استفاده می کنیم. اما کوتاه نویسی آن : است. چون زیاد استفاده می شود، از کوتاه نویسی بهره می بریم.

3) مثال کامل با توضیح و علاقه مندی

حالا هر آیتم، نام، توضیح، و حالت «دلخواه» دارد. همه با v-for ساخته می شوند و مقدار پراپس ها از آرایه می آید.

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

مشاهده در ادیتور

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

مشاهده در ادیتور

4) چرا باید از key استفاده کنیم؟

بدون «کلید (key)» ویو برای سرعت، عناصر را «بازیافت» می کند. پس جابه جایی ها غلط می شود. کلید، هر عنصر را یکتا می کند؛ مانند شماره دانش آموزی.

<button @click="removeItem">Remove Item</button>

مشاهده در ادیتور

<script>
export default {
  methods: {
    removeItem() {
      this.foods.splice(1, 1);
    }
  }
};
<\/script>

مشاهده در ادیتور

هشدار: از اندیس آرایه برای key استفاده نکن. چون با حذف یا افزودن، اندیس تغییر می کند.

<food-item
  v-for="x in foods"
  :key="x.name"
  :food-name="x.name"
  :food-desc="x.desc"
  :is-favorite="x.favorite" />

مشاهده در ادیتور

جمع بندی سریع

• با v-for از روی آرایه کامپوننت بساز.
• پراپس ها را پویا با v-bind بده.
• برای هر مورد یک key یکتا بگذار.
• از اندیس برای key استفاده نکن.
• جابه جایی نادرست، با key حل می شود.

نکته: ادامه مسیر: صفحه پراپس ویو و سپس رویدادهای emit در ویو. همچنین عبارت کامپوننت های v-for در ویو را برای مرور ذخیره کن.