Quiero recorrer un objeto json y crear para cada elemento un componente cuyos accesorios también sean de ese objeto
Dentro del div a insertado
<div class="row" v-for="item in projectsJson">Uso un div para obtener la clase de arranque.
Esto crea dos divs en lugar de uno. El resultado deseado sería un contenedor div lleno de componentes.
Usé la misma lógica de reaccionar, ¿esto funciona de manera diferente en vue?
jsonObj = [ { "name": "proj1", "descr": "stuff", "stack": ["which", "other lib"], "imgPath": "." }, { "name": "proj2", "descr": "stuffsss", "stack": ["which ", "other "], "imgPath": "." } ] <template> <div class="row" v-for="item in projectsJson"> <project-comp :project_name="item.name" /> </div> </template>Si necesita un solo div con row de clase y todo el componente secundario dentro de él, debe mover el v-for al componente en lugar del div.
React también se comporta de la misma manera. A qué componente aplica el bucle, se repetirá en DOM.
<div class="row" > <project-comp v-for="item in projectsJson" :project_name="item.name" /> </div>En Vue.js, v-for se aplica al elemento DOM en el que se encuentra el atributo. Además, no olvides la key que debes hacer:
<template> <div class="row"> <project-comp v-for="item in projectsJson" :project_name="item.name" :key="project.name" <!-- The key should be unique in the array, use name if it is unique, or use id --> /> </div> </template>