Question

我正在使用v-bind传递来自循环到子组件的父Vue组件（项目）的数据：一个打开模态以编辑项目的按钮。我在子组件中使用“道具”来注册数据。问题：仅传递第一个项目中的数据，并重复执行下一个任务。我在做什么错了？

ProjectComponent（父级）：

 <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">&times;</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"
}
]

Answer 1

所以我终于找到了解决方案！问题来自重用相同的引导程序模式...而不是Vue代码...太傻了。引导程序文档中描述了该解决方案：https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

从循环到Vue子组件的Vue父组件传递动态数据

1 个答案: