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>

Nitheesh · Accepted Answer · 2021-11-25 10:46:21Z

3

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>

answered Nov 25, 2021 at 10:46

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 23:41:01Z

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>

edited Jul 15, 2022 at 23:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 25, 2021 at 10:47

thchp

2,4741 gold badge22 silver badges36 bronze badges

4 Comments

Nitheesh Over a year ago

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 Over a year ago

@Nitheesh what's wrong with providing additional information for the OP?

Nitheesh Over a year ago

Additional information never ends. So anyone can add another answer on top of your implementation aswell.

thchp Over a year ago

@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

Collectives™ on Stack Overflow

Use v-for create components inside div in vue js

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related