单击“确定”时将 VueDraggable 模型数据传回 b-modal

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

我们找到的解决方案是创建数据副本。将其与子项进行双向绑定，然后单击 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)
  },
}

单击“确定”时将 VueDraggable 模型数据传回 b-modal

Passing VueDraggable model data back to b-modal on OK click

javascript

vuejs2

bootstrap-vue

vuedraggable