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

Question

I'm using v-bind to pass data from a parent Vue component (Project) that is looping to a child component: a button that opens a modal to edit the project. I'm using "props" in my child component to register the data. Problem: only the data from the first Project is passed, and is repeated to the next tasks. What I am doing wrong?

ProjectComponent (Parent):

 <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 (Child):

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

And this an example of the array:

 [
{
"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

So I finally found the solution. The problem comes from reusing the same bootstrap modal... Not the Vue code... So dumb: The solution is described in the bootstrap documentation: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content