我们有以下模板结构:
<b-modal
id="reorder-modal"
title="Reorder Dashboard"
@ok="storeNewOrder"
ok-title="Save"
ok-variant="success"
:ok-disabled="disableSave">
<reorder-modal-row
:dash-board-data="dashBoardData"
:disable-save="disableSave"
@updateDisableSave="updateDisableSave"/>
</b-modal>
reorder-modal-row
本质上是一个可拖动的组件,如下所示:
<div>
<draggable-component
v-model="dashBoardDataClone"
:move="updatePosition"
handle=".handle"
ghost-class="ghost"
@start="drag=true"
@end="drag=false">
<div
v-for="card in dashBoardDataClone"
:key="card.id"
class="card-list-item border p-2 my-3">
<font-awesome-icon icon="align-justify" class="handle"/>
{{card.db_name}}
</div>
</draggable-component>
</div>
现在,可拖动组件的模型使用通过 props 传递的数据的克隆:dash-board-data
。我们想要实现的是,当用户点击里面的保存按钮时,b-modal
它应该从孩子那里收集克隆的数据并进行后端调用以更新或数据库。问题是我们不确定如何实现这个功能,因为 Save 按钮不是孩子的一部分。
我们尝试使用可拖动的移动事件,但每次拖动都会向父级发出一个事件。任何帮助将不胜感激 !