在Vue上使用for循环进行模态

Question

我想为带有循环的卡创建模态。我尝试了v-bind：id =“ masa._id”和v-bind：data-target =“'＃'+ masa._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>

我将＃与masa._id串联在一起，以确保不将其解释为纯字符串。 _id的值对于每个值都是唯一的。

我的代码的Vue部分是：

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

Answer 1

我这样添加了前缀：v-bind：id =“'kimlik'+ masa._id”和v-bind：data-target =“'＃kimlik'+ masa._id”只是因为_id以数字开头。而且有效。