Use v-for create components inside div in vue js

Question

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>

Answer 1

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>

Answer 2

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>

• Nitheesh: This answer is same an mine. The solution for the answer is to move the v-for to component level. Not with the key for v-for. the user should have considered the usage of key in his first imlementation itself.
• thchp: @Nitheesh what's wrong with providing additional information for the OP?
• Nitheesh: Additional information never ends. So anyone can add another answer on top of your implementation aswell.
• thchp: @Nitheesh I added the key in my answer because it felt wrong to provide vue.js code in my answer that would cause Vue.js warnings