Передача данных модели VueDraggable обратно в b-modal при нажатии ОК - PullRequest
Новая
       103

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

1 голос
/ 21 октября 2019

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

        <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, которая должна собрать клонированные данные от дочернего объекта и выполнить внутренний вызов для обновления или базы данных. Проблема в том, что мы не уверены, как реализовать эту функцию, поскольку кнопка «Сохранить» не является дочерней.

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

1 Ответ

0 голосов
/ 21 октября 2019

Мы нашли решение создать копию данных. При двустороннем связывании с ребенком и нажатием кнопки 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)
  },
}
...