Vue.js List Rendering v-for con un componente

Vue.js es uno de los mejores marcos para JavaScript como ReactJS. El VueJS se utiliza para diseñar la capa de interfaz de usuario, es fácil de aprender para cualquier desarrollador. 

Para repetir una tarea durante un tiempo fijo, hacemos uso del bucle for . Los componentes se utilizan para crear la combinación de elementos de la interfaz de usuario que deben llamarse cualquier cantidad de veces. Algunos datos pueden ser específicos del componente. Esos datos deben vincularse con un componente de forma repetida. Esto es cuando la representación de listas v-for con un componente resulta útil. El v-for se usa para recorrer los datos y mostrar el componente requerido según la elección del usuario.

Sintaxis:

<Component v-for="item in items" :key="item.id">
    Content
</Component>

Enfoque: Aquí, crearemos un proyecto Vue y luego crearemos una interfaz de usuario diferente que muestre los componentes.

Crear proyecto Vue:

Paso 1: para crear una aplicación Vue, debe instalar módulos Vue con este comando npm. Debe asegurarse de tener el Node instalado previamente.

npm install vue

Paso 2: use Vue JS a través de CLI. Abra su terminal o símbolo del sistema y ejecute el siguiente comando.

npm install --global vue-cli

Paso 3: Ejecute el siguiente comando para crear el proyecto.

vue init webpack myproject

Paso 4:  después de crear su proyecto Vue, muévase a la carpeta para realizar diferentes operaciones.

cd myproject

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm run dev

Abre tu navegador. Abra una pestaña con localhost ejecutándose (http://localhost:8080/) y podrá ver el resultado que se muestra en la imagen.

Estructura del proyecto: después de ejecutar los comandos (mencionados en los pasos anteriores), si abre el proyecto en un editor, puede ver una estructura de proyecto similar (como se muestra a continuación).

Estructura del proyecto

Ejemplo: En este ejemplo, estamos ejecutando un bucle para mostrar todos los componentes del encabezado. El encabezado se pasa como accesorio al componente de encabezado. 

Componente de encabezado : cree un nuevo archivo Header.vue en la carpeta de componentes.

<template>
  <h3>
      {{ index }}-{{ heading }}
  </h3>
</template>
  
<script>
  export default {
    name: "Header",
    props: ["heading", "index"],
  };
</script>

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2><u>v-for with a component</u></h2>
    <Header
      v-for="(heading, index) in data"
      v-bind:heading="heading"
      v-bind:index="index">
    </Header>
  </div>
</template>
<script>
  import Header from "./components/Header";
  export default {
    name: "App",
    components: {
      Header,
    },
    data() {
      return {
        data: [
          "Header component 1",
          "Header component 2",
          "Header component 3",
          "Header component 4",
          "Header component 5",
        ],
      };
    },
  };
</script>

Producción:

v-para con un componente

Referencia : https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component