I want to loop over a json object and create for each element a component which props are also from that object
Inside the div a inserted
<div class="row" v-for="item in projectsJson">
I use a div to get the bootstrap class.
This does create two divs instead of one. Desired result would would be one div container filled with components.
I used the same logic from react is this working different in 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>
If you need a single div with class row and all the child component inside that, you should move the v-for to the component instead of the div.
React also behaves in same way. To which component you apply the loop, it will repeat in DOM.
<div class="row" >
<project-comp
v-for="item in projectsJson"
:project_name="item.name" />
</div>
In Vue.js, v-for applies to the DOM element on which the attribute is. Also, don't forget the key
You should do :
<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>