在确定单击时将 VueDraggable model 数据传回 b-modal

Question

We've got the following template structure:

        <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 is essentially a draggable component like so:

  <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>

Now, the model of the draggable component uses a clone of the data passed via props :dash-board-data . What we're trying to achieve is that when the user clicks on the Save button inside the b-modal that should collect the cloned data from the child and make a back-end call to update or database. The problem is that we are not sure how to achieve this functionality since the Save button is not part of the child.

We tried using the draggable move event but that emits an event to the parent on every drag. Any help will be appreciated !

Answer 1

The solution we found was to create a copy of the data. 2-way bind that with the child and on Save button click we assign the original data to the copy.

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)
  },
}