[英]Passing dynamic data from a Vue parent component that loops to a Vue child component
我正在使用 v-bind 將數據從循環到子組件的父 Vue 組件(項目)傳遞:一個打開模式以編輯項目的按鈕。 我在我的子組件中使用“道具”來注冊數據。 問題:只有第一個項目的數據被傳遞,並重復到下一個任務。 我做錯了什么?
項目組件(父):
<div class="card my-2" v-for="project in projects" :key="project.id">
<div class="card-header">{{ project.name }}</div>
<div class="card-body">{{ project.description }}
<edit-project :item="project"></edit-project>
</div>
</div>
EditProjectComponent(子):
<template>
<div class="mt-2">
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-secondary btn-sm"
data-toggle="modal"
data-target="#editModal"
>
+
</button>
<!-- Modal -->
<div
class="modal fade"
id="editModal"
tabindex="-1"
role="dialog"
aria-labelledby="editModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">
{{ item.name }}
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="name">Nom du projet</label>
<input
type="text"
id="name"
name="name"
class="form-control"
v-model="item.name"
/>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
type="text"
id="description"
name="description"
class="form-control"
v-model="item.description"
>
></textarea
>
</div>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary btn-sm"
data-dismiss="modal"
>
Fermer
</button>
<button
type="button"
class="btn btn-primary btn-sm"
data-dismiss="modal"
>
Enregistrer
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "EditProject",
props: ["item"],
};
</script>
這是數組的一個例子:
[
{
"id": 8,
"name": "rodriguez.com",
"description": "Vero ut inventore ex omnis quibusdam. Quam nobis laboriosam quae optio. Explicabo sed incidunt quia dolores maiores.",
"created_at": "2020-04-05T09:18:37.000000Z",
"updated_at": "2020-04-05T09:18:37.000000Z"
},
{
"id": 19,
"name": "Tyler Matthews",
"description": "Veritatis dolorum do",
"created_at": "2020-04-05T14:52:02.000000Z",
"updated_at": "2020-04-05T14:52:02.000000Z"
},
{
"id": 21,
"name": "Sacha Leblanc",
"description": "Recusandae Fugit d",
"created_at": "2020-04-05T19:40:36.000000Z",
"updated_at": "2020-04-05T19:40:36.000000Z"
}
]
所以我終於找到了解決方案。 問題來自重用相同的引導模式......不是Vue代碼......太愚蠢了:引導文檔中描述了解決方案: https://getbootstrap.com/docs/4.0/components/modal/#variing-模態內容
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.