Twitter Bootstrap Question posted in

Multiple modal details in vue js-Twitter bootstrap

I’m figuring out how to open the modal details according to the id of the data that I have. I’m beginner in vue.js, and in the process of learning. I have made the code as below, but the modal doesn’t open according the id, but all are open. Where is the code mistake that I made or the missing code?

can someone help me with this problem? I’ve tried many ways but still can’t.

My JS Fiddle

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    selectedCountry: '',
    selectedYear: '',
    modalOpen : false,
    items: [
      {
        id: '1',
        name: 'Nolan',
        type: 'mercedes',
        year: '2020',
        country: 'england'
      },
      {
        id: '2',
        name: 'Edgar',
        type: 'bmw',
        year: '2020',
        country:'belgium'
      },
      {
        id:'3',
        name: 'John',
        type: 'bmw',
        year: '2019',
        country: 'england'
      },
      {
        id: '4',
        name: 'Axel',
        type: 'mercedes',
        year: '2020',
        country: 'england'
      }
    ]
  },
  methods: {
    showModal() {
      $('.modal').modal('show')
    }
  }
})
.list-item{
  margin-top:50px;
}

.card{
  box-shadow:0px 10px 16px rgba(0,0,0,0.16);
  width:400px;
  padding:20px 30px;
  margin-bottom:30px;
  display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<div id="app">
  <div class="list-item" v-for="item in this.items">
    <div class="card">
      <p>Name: {{ item.name }}</p>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal{{ item.id }}" @click.prevent="showModal">
        Details
      </button>
    </div>
  </div>
  
  //Modal
  <div class="modals" v-for="(item, id) in this.items" :key="id">
    <div class="modal fade" id="exampleModal{{ item.id }}" 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">Modal title {{ item.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">
            <p>{{ item.name }}</p>
            <p>{{ item.type }}</p>
            <p>{{ item.year }}</p>
            <p>{{ item.country }}</p>
          </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>
</div>
Tags:

2

Answers


  1. 0

    If you inspect each button trigger element what is the value in the data-target attribute? It’s probably the same for all of them, as you are not binding the id properly

    Try with:

    :data-target="'#exampleModal' + {{ item.id }}"
    Login or Signup to reply.
  2. 0

    Set data-target in button tag as given below

    :data-target="'#exampleModal' + item.id"

    And modal id like this

    :id="'exampleModal' + item.id"

    And also add this CSS Style in your component

    .fade:not(.show) {
   opacity: 1;
 }

    And there is no need of showModal function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search