use v-for create components inside div in vue js-CodePudding

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 v-for="item in projectsJson"> I use a div to get the boostrap 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 differnt 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>

CodePudding user response：

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>

CodePudding user response：

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>