我想遍歷一個 json 物件并為每個元素創建一個組件，該組件的道具也來自該物件
在插入 <div v-for="item in projectsJson">
的 div 中，我使用 div 來獲取 boostrap 類
這確實創建了兩個 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>
uj5u.com熱心網友回復：
如果您需要一個帶有類的單個 divrow以及其中的所有子組件，您應該將 移動v-for到組件而不是 div。
React 也有同樣的行為。您將回圈應用于哪個組件，它將在 DOM 中重復。
<div class="row" >
<project-comp
v-for="item in projectsJson"
:project_name="item.name" />
</div>
uj5u.com熱心網友回復：
在 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/367550.html
標籤：javascript Vue.js for循环 Vue 组件
上一篇：如何在R中按順序更改列名