Html 在Vue上使用for循环执行模态

我想为带有循环的卡片创建模态。我尝试了v-bind:id=“masa.\u id”和v-bind:data target=“”#“+masa.\u id”，但模式不起作用。。。如何在循环中使用情态动词

以下是我的html代码：

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

---

我添加了这样的前缀：v-bind:id=“'kimlik'+masa.\u id”和v-bind:data target=“'kimlik'+masa.\u id”，只是因为“id”以数字开头。它成功了。

什么包含Bahce1grupA_数据？jsonified mongodb data.ok，在DOM结构中添加了模态？我尝试用上面的代码动态创建它们。我没有任何与情态动词相关的东西，在htmlWhat's not working“是什么意思？代码中没有显示？单击时不打开？请更具体地说明您遇到的问题。

      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);