Rendering a List of Components

Illustrate how to render a list of Vue components dynamically using v-for and pass data to them with props.

<template>
  <div>
    <my-component 
      v-for="item in itemsList" 
      :key="item.id" 
      :item-data="item"
    ></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      itemsList: [
        { id: 1, name: 'Item 1', description: 'This is item 1.' },
        { id: 2, name: 'Item 2', description: 'This is item 2.' },
        // ... more items
      ]
    };
  }
};
</script>

This Vue template uses 'v-for' to render a list of 'MyComponent' components. Each component receives an 'item-data' prop with its corresponding data from 'itemsList'. The key ':key' is used for Vue's rendering system to track each node's identity, which is essential for maintaining state during list updates.