在确定单击时将 VueDraggable 模型数据传递回 b 模态

Question

我们有以下模板结构：

<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内的"保存"按钮时，该按钮应从子项收集克隆的数据，并进行后端调用以更新或数据库。问题是我们不确定如何实现此功能，因为"保存"按钮不是子项的一部分。

我们尝试使用可拖动的移动事件，但它会在每次拖动时向父级发出一个事件。任何帮助将不胜感激！

Answer 1

我们发现的解决方案是创建数据的副本。 2 向将其与子项绑定，单击Save按钮时，我们将原始数据分配给副本。

methods: {
async loadGridAndContent () {
let result = await AppService.loadDashboard(this.userDetails.psref)
this.dashBoardData = result.data[0]
this.dashBoardDataClone = JSON.parse(JSON.stringify(this.dashBoardData))
},
async storeNewOrder () {
this.dashBoardData = this.dashBoardDataClone
await AppService.reorderDashboard(this.dashBoardData)
},
}