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

【问题标题】：Passing dynamic data from a Vue parent component that loops to a Vue child component从循环到 Vue 子组件的 Vue 父组件传递动态数据
【发布时间】：2020-07-17 20:11:50
【问题描述】：

我正在使用 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">&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"
}
]

【问题讨论】：

代码对我来说似乎很好。您确定您的 projects 数组包含正确的数据吗？
是的，第一次项目迭代的字段已正确填写。问题在于具有相同值的其他迭代......
我的意思是他在你的 SOURCE 数组中的数据——它们是正确的，而不是重复的吗？特别是project.id?
对不起，是的，我已经检查过了，它们是正确的。
这段代码看起来没问题。你能展示完整的子组件和模态代码吗？

标签： javascript vue.js

【解决方案1】：

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

【讨论】：