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.

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>
                </div>

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

                </div>

                <!-- 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>

              </div>
            </div>
          </div>

          <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>
            </div>
          </div>

      </div>

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(()=> {
              axios.get('/getBahce1grupA')
                  .then((response)=> {
                      this.Bahce1grupA_data = response.data;
                  })
          }, 5000);