作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们有以下模板结构:
<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 内的“保存”按钮时,该按钮应该从子项收集克隆数据,并对更新或数据库进行后端调用。问题是我们不确定如何实现此功能,因为“保存”按钮不是子项的一部分。
我们尝试使用可拖动移动事件,但每次拖动时都会向父级发出一个事件。任何帮助将不胜感激!
最佳答案
我们找到的解决方案是创建数据的副本。将其与子项进行 2 路绑定(bind),然后单击“保存”按钮,将原始数据分配给副本。
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)
},
}
关于javascript - 单击“确定”后将 VueDraggable 模型数据传递回 b-modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58485178/
我是一名优秀的程序员,十分优秀!