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

Question

我想循环一个 json 对象并为每个元素创建一个组件，该组件的 props 也来自该对象

在div内插入了一个

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

我使用 div 来获取引导类。

这确实创建了两个 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

如果您需要一个带有 row 类的 div 以及其中的所有子组件，则应将 v-for 移动到该组件而不是 div。

React 的行为方式也相同。您将循环应用于哪个组件，它将在 DOM 中重复。

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