通过 VueJS 中的道具将动态数据传递给 bootstrap 的模态

Question

我正在做一个小的个人项目，bootstrap 模态有一个小问题。我有一个项目列表（卡片中的每个人），每次单击卡片时我都想显示详细信息。但无论我点击哪张卡片，我总是会在模态中获得相同的值（来自第一个项目）。这是我的代码

App.vue

<template>
  <div>
    <Navbar />
    <Projects />
  </div>
</template>
 
<script>
import Navbar from "./components/Navbar.vue";
import Projects from "./components/projects/Projects.vue";
 
export default {
  name: "App",
  components: { Navbar, Projects },
};
</script>

Projects.vue

<template>
  <div class="projects bg-light" id="projects_title">
    <h1>Projects</h1>
    <div class="projects_cards">
      <div v-for="project in projects" class="single_project" :key="project.id">
        <SingleProject :project="project"/>
          <Modal :project="project" />
      </div>
    </div>
  </div>
</template>
 
<script>
import SingleProject from "./SingleProject.vue";
import Modal from "../Modal.vue";
export default {
  data() {
    return {
      projects: [
        {
          id: "1",
          number: "III",
          title:
            "Title 4",
        },
        {
          id: "2",
          number: "IV",
          title: "Title 4",
        },
      ],
    };
  },
  components: {
    SingleProject,
    Modal,
  },
};
</script>

SingleProject.vue

<template>
  <div class="card mx-2" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">  {‌{project.number}} </h5>
    <h6 class="card-subtitle mb-2 text-muted">{‌{project.title}}</h6>
    <p class="card-text">Some quick example text</p>
    <a class="card-link" data-toggle="modal" data-target="#exampleModal">Project Card</a>
  </div>
</div>
</template>
 
<script>
export default {
  props: {project : {
    type: Object
  }},
}
</script>

Modal.vue

<template>
  <div>
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">{‌{project.id}}</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {‌{project.title}}
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    project: {
      type: Object,
    },
  },
};
</script>

在道具内部，一切都很好。

Answer 1

对我来说问题出在这一行:

<a class="card-link" data-toggle="modal" data-target="#exampleModal">Project Card</a>

数据目标触发器 #exampleModal 是一个 id，你所有的模态都有相同的 id，所以你会得到像这样的奇怪行为。

你有不同的方式来处理它，比如使用@click 事件会更好，但你有很多重构要做。

一个小的修复可能是这样的：

Modal.vue

:id="'exampleModal-' + project.id"

单身Project.vue

<a class="card-link" data-toggle="modal" :data-target="'#exampleModal-' + project.id">Project Card</a>

为了确定，请使用格式化值更新所有 ID。

让我知道进展如何并欢呼

通过 VueJS 中的道具将动态数据传递给 bootstrap 的模态

Passing dynamic data to bootstrap's modal by props in VueJS

javascript

modal-dialog

twitter-bootstrap

vue.js

vue-props