Solution 1 :

I added prefix as such : v-bind:id=”‘kimlik’+masa._id” and v-bind:data-target=”‘#kimlik’+masa._id” just because _id starts with numbers. And it worked.

Problem :

I want to create modals for cards with loops. I tried v-bind:id=”masa._id” and v-bind:data-target=”‘#’+masa._id” but modal not working … how to do modals in loops?

Here is my html code:

        <div class="row">

      <div class="col" v-for="masa in Bahce1grupA_data">

           <!-- The Masa Modal -->
          <div class="modal fade"  v-bind:id="masa._id">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                  <h4 class="modal-title">[[masa.siparis_grup]]-[[masa.siparis_masano]]</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>

                <!-- Modal body -->
                <div class="modal-body">
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                      <span class="badge badge-primary badge-pill">5</span>
                  Toplam Fiyat : 30
                  Kişi Sayısı : 2


                <!-- Modal footer -->
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary">Hesabı Kapat</button>
                  <button type="button" class="btn btn-info">Masayı Değiştir</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>


          <div class="card text-white mb-3" v-bind:class="getClass(masa.hesap_durumu)">
            <div class="card-body">
              <h5 class="card-title">[[masa.siparis_grup]]-[[masa.siparis_masano]]</h5>
              <button type="button" class="btn btn-light" data-toggle="modal" v-bind:data-target="'#'+masa._id">Hesabı Aç</button>


I concatenated # with masa._id to make sure not to interpret them as a plain string. And values of _id are totally unique for each.

and Vue part of my code is:

      var vm = new Vue({
      el: '#app2',
      delimiters: ['[[',']]'],
      data: {
        Bahce1grupA_data: {},
        Bahce1grupB_data: {},
        Bahce1grupC_data: {},
        Bahce1grupD_data: {},            
      mounted: function() {
              polling1=setInterval(()=> {
                  .then((response)=> {
                      this.Bahce1grupA_data =;
          }, 5000);


Comment posted by Andriy Yushko

what contain Bahce1grupA_data?

Comment posted by Şansal Birbaş

jsonified mongodb data.

Comment posted by Andriy Yushko

ok, in DOM structure your modal added?

Comment posted by Şansal Birbaş

Well, I try to dynamically create them with the code above. I dont have anything related to modals anywhere else in html

Comment posted by Bryce Howitson

What does “not working” mean? Doesn’t show in the code? Doesn’t open on click? Please be more specific about the problem you’re experiencing.