Question

这是我的表格数据

 <tr v-for="company, index in companies.data" :key="index.id">
                <td>{{ company.first_name }} {{ company.last_name }}</td>
                <td>{{ company.license_no }}</td>
                <td>{{ company.car_registration }}</td>
                <td>
                <button id="show-modal"  @click="modalOpen(0)" class="view-button">Call</button>
                 <modal v-model="compnay" v-if="showModal" @close="showModal = false">
                        <h3 slot="header" style="margin-left: auto;
    margin-right: auto;">{{company.first_name}} {{ company.last_name }}</h3>
                        <h3 slot="body">Car Registration No: {{company.car_registration}}</h3>                        
                    </modal>
                </td>
              </tr>

我已将动态数据传递给模式插槽每当我单击其他项目时，它都显示相同在我的API中，我有不同的数据，在我的表格中也显示了不同的数据，但是以模式加载相同的数据。这是模态内容

<script type="text/x-template" id="modal-template">
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-header">
            <slot name="header" style="margin-left: auto;margin-right: auto;">         
            </slot>
          </div>
          <div class="modal-body" id="el">
            <slot name="body">
            </slot>
            <slot name="test">
             Calling  @{{modalcompany}}

            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">

              <button class="modal-default-button view-button" @click="$emit('close')">
                OK
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>

模式内容

Answer 1

这是我想出的快速解决方案，希望可以解决您的问题！

<div id="app">
  <div v-for="company in companies">
    <div class="company">
      {{ company.name }} - <button @click="openModal(company)"> View appointments</button>
    </div>
  </div>
  <modal v-model="showModal" company="company">
    <div slot="header">{{company.name}}</div>
    <div slot="body">{{(company.appointments || []).join(', ')}}</div>
  </modal>
</div>

您可以在此处查看完整的演示：https://codepen.io/chainlist/pen/qMjBOQ

Vue JS使用Modal加载动态数据问题

1 个答案: