在 vue js 中使用 v-for 在 div 中创建组件

Question

我想遍历一个 json 对象并为每个元素创建一个组件，该组件的道具也来自该对象

里面div一个插入

<div class="row" v-for="item in projectsJson">

我使用 div 得到 bootstrap class。

这确实创建了两个 div 而不是一个。期望的结果将是一个 div 装满组件的容器。

我使用了与 react 相同的逻辑，这在 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

如果您需要单个 div 和 class row 以及其中的所有子组件，您应该将 v-for 移动到组件而不是 div.

React 也以同样的方式运行。您将循环应用于哪个组件，它将在 DOM.

中重复

<div class="row" >
    <project-comp
        v-for="item in projectsJson"
        :project_name="item.name" />
</div>

Answer 2

在 Vue.js 中，v-for 应用于属性所在的 DOM 元素。另外，不要忘记 key 你应该这样做：

<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>

在 vue js 中使用 v-for 在 div 中创建组件

Use v-for create components inside div in vue js

javascript

for-loop

vue.js

vue-component