javascript - Vue JS使用Modal加载动态数据问题
问题描述
这是我的表数据
<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>
我已将动态数据传递给模态插槽,每次单击不同的项目时,它都显示相同。这是模态内容
<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
推荐阅读
- python - 使用xlsxwriter将自定义类类型数据写入excel TypeError: Unsupported type
在写() - javascript - 为什么我的 intersectionObserver 将我的 querySelect 返回为未定义?
- r - 如何在 R 图中使 X 轴不被切断
- aws-ssm - 在哪里可以找到 AWS Systems Manager (SSM) 文档 ARN?
- javascript - 从 Javascript 中的函数导出变量
- python-3.x - 添加按钮以与 ttk 笔记本对齐导致几何问题
- bash - 在 bash 中使用系统日期格式化 URL
- javascript - 在成帧器运动中为 scaleX 设置动画而不影响儿童的比例
- swift - TabbarController 具有多个选项卡,其中包含具有主 > 详细信息类的导航控制器,不更新选项卡之间的视图
- python - 使用 json 文件时,多处理锁不会阻止竞争条件