Javascript Vue JS使用Modal加载动态数据问题
这是我的表格数据Javascript Vue JS使用Modal加载动态数据问题,javascript,laravel,vuejs2,Javascript,Laravel,Vuejs2,这是我的表格数据 <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&g
<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>
{{company.first_name}{{company.last_name}}
{{company.license_no}
{{company.car_registration}
呼叫
{{company.first_name}{{company.last_name}}
汽车登记号码:{{公司.汽车登记}
我已将动态数据传递到模式插槽
每次我点击不同的项目,它都会显示相同的内容
在我的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>
呼叫{{modalcompany}}
好啊
模态内容根据我的猜测,这里有一个快速的解决方案来解决您的问题,我希望它能帮助您
<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>
<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>
{{company.name}-查看约会
{{company.name}
{{(company.appointments | |[])。加入(',')}
您可以在此处看到完整的演示:共享任何有关此的实时演示/片段?很抱歉,我没有实时演示,如果不了解您的模式代码组件,我们将无法完成很多工作。@ChainList Check再次检查我已更新问题谢谢更新。我们也可以使用模态组件的JS部分吗?:)感谢您的帮助,效果非常好,除了您的帮助之外,我已经解决了更改变量名的问题。问题出在我的公司变量上,无论如何,非常感谢。很高兴来到这里。我不知道性能是否是您关心的问题之一,但上面介绍的解决方案具有更轻的DOM,因为我们没有为每个公司生成模式,因此页面更轻。。