Vue.js List Rendering v-for con un objeto

Vue.js

Para repetir una tarea durante un tiempo fijo, hacemos uso del bucle for . El v-for se usa para atravesar el objeto y mostrar los datos requeridos según la elección del usuario. Hay una gran cantidad de datos que deben representarse en una página web. A veces, los datos vienen en forma de un objeto . El valor clave no está entre comillas dobles en el objeto.

Object : { key : "Geeks for Geeks" }

Sintaxis:

<li v-for="value in object">
   {{ value }}
</li>

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

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: ejecutar un ciclo para mostrar todas las claves y sus valores en el objeto junto con el índice. El primer argumento es el valor , luego la clave y el tercero es el índice en v-for. 

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <strong>
        Print all key , values of an object 
        along with index
    </strong><br />
    <p v-for="(value, key, index) in object">
      <strong>
          {{ index }}.   {{ key }}   - {{ value }}
      </strong>
    </p>
  
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        object: {
          Site: " Geeks for Geeks ",
          Framework: " Vue ",
          Type: " Article ",
          Subject: " v-for with an Object ",
        },
      };
    },
  };
</script>

Producción:

v-para con un objeto

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