Saya sedang mengerjakan proyek pribadi kecil dan saya punya masalah kecil dengan modal bootstrap. Saya memiliki daftar proyek (semua orang di dalam kartu) dan saya ingin menunjukkan detail setiap kali saya mengklik kartu. Tetapi tidak peduli kartu mana yang saya klik, saya selalu mendapatkan nilai yang sama di dalam modal (dari proyek pertama). Ini kode saya

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>

Di dalam alat peraga semuanya tampak baik-baik saja. Modal setelah mengklik proyek kedua javascript twitter-bootstrap vue.js modal-dialog vue-props

1
Maciek Celiński 20 November 2020, 13:29

1 menjawab

Jawaban Terbaik

Bagi saya ini baris ini masalahnya:

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

Pemicu target data #exampleModal yang merupakan id, dan semua modal Anda memiliki id yang sama, sehingga Anda akan mendapatkan perilaku aneh seperti ini.

Anda memiliki cara berbeda untuk menanganinya, seperti menggunakan acara @click akan lebih baik, tetapi Anda memiliki banyak refactor yang harus dilakukan.

Perbaikan kecil bisa seperti ini:

Modal.vue

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

Proyek Tunggal.vue

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

Yang pasti, perbarui semua id dengan nilai yang diformat.

Beri tahu saya bagaimana kelanjutannya dan bersorak

1
DarioRega 21 November 2020, 00:22