Tenemos la siguiente estructura de plantilla:

        <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 es esencialmente un componente que se puede arrastrar como este:

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

Ahora, el modelo del componente que se puede arrastrar usa un clon de los datos pasados ​​a través de los accesorios :dash-board-data. Lo que estamos tratando de lograr es que cuando el usuario hace clic en el botón Guardar dentro de b-modal, se deben recopilar los datos clonados del niño y realizar una llamada de back-end para actualizar la base de datos. El problema es que no estamos seguros de cómo lograr esta funcionalidad ya que el botón Guardar no es parte del niño.

Intentamos usar el evento de movimiento arrastrable, pero eso emite un evento al padre en cada arrastre. ¡Cualquier ayuda será apreciada!

1
bba278 21 oct. 2019 a las 14:18

1 respuesta

La mejor respuesta

La solución que encontramos fue crear una copia de los datos. Enlace bidireccional eso con el niño y en el botón Save, asignamos los datos originales a la copia.

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)
  },
}
0
bba278 21 oct. 2019 a las 14:16