Передача данных модели VueDraggable обратно в b-модальное окно при нажатии кнопки ОК

У нас есть следующая структура шаблона:

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

Теперь модель перетаскиваемого компонента использует клон данных, передаваемых через свойства :dash-board-data. Мы пытаемся добиться того, чтобы когда пользователь нажимал кнопку «Сохранить» внутри b-modal, он должен был собрать клонированные данные от дочернего элемента и сделать внутренний вызов для обновления или базы данных. Проблема в том, что мы не уверены, как реализовать эту функциональность, поскольку кнопка «Сохранить» не является частью дочернего элемента.

Мы пробовали использовать событие перетаскиваемого перемещения, но оно генерирует событие для родителя при каждом перетаскивании. Любая помощь будет оценена по достоинству!


javascript vuejs2 vuedraggable bootstrap-vue
person bba278    schedule 21.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Мы нашли решение - создать копию данных. Двусторонняя привязка к дочернему элементу и 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)
  },
}
person bba278    schedule 21.10.2019