gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:12:23 24 4
gpt4 key购买 nike

这是我的表数据

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

模态内容

最佳答案

这是我猜测的一个快速解决方案,可以解决您的问题,希望对您有所帮助!

<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

关于javascript - Vue JS 使用 Modal 加载动态数据问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52161949/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com