Vuetify v-data-table перетаскивание

Я использую V-data-table вместе с vuex store. Ниже приведены пункты, как я настроил свою таблицу v-данных.

  1. Отключена сортировка по каждому столбцу
  2. привязать элементы v-data-table к данным хранилища состояний vuex
  3. использование sortablejs для перетаскивания строк

Проблема: когда я перетаскиваю строки в таблице v-данных, я обновляю хранилище vuex (обновляя значение индекса для объектов в массиве с помощью значения индекса строки таблицы). Vuex обновляется правильно, но данные, отображаемые в таблице v-данных, находятся не в том порядке, в котором они находятся в хранилище состояний vuex

Может ли кто-нибудь помочь мне в этом

Лучший способ, которым я пытался решить эту проблему, - это принудительно повторно отрисовать компонент v-data-table, но когда я это делаю, я больше не могу перетаскивать

Принудительно визуализируется с использованием следующего шаблона

<template>
  <component-to-re-render :key="componentKey" />
</template>
// script
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

vue.js vuetify.js vuex sortablejs vue-data-tables
person Manideep Kothapalli    schedule 09.07.2019    source источник
comment
Можете ли вы показать код, в котором вы обновляете магазин vuex?   -  person ittus    schedule 10.07.2019
comment
Это метод, который я вызываю для хука жизненного цикла монтирования, который вызывает мутацию из действия vuex и обновляет порядок объектов в массиве хранилища состояний vuex Sortable.create(table, { handle: ".handle", onEnd ({ newIndex, oldIndex }) { _self.$store.dispatch('adSets/updateAdSets', {oldIndex: oldIndex, newIndex: newIndex, orderId: _self.orderId, campaignId: _self.campaignId}) // location.reload() // _self.$refs.table.$forceUpdate() // _self.forceRerender() _self.reset() } })   -  person Manideep Kothapalli    schedule 10.07.2019

Ответы (1)


arrow_upward
2
arrow_downward

Возможно, это не оптимальное решение, но у меня была аналогичная проблема, за исключением того, что я просто использовал обычный массив. Мне удалось это исправить, вызвав метод Sortable.create () в хуке жизненного цикла updated ().

Я предполагаю, что когда вы вызываете Sortable.create (table, ...), он ссылается на этот экземпляр элемента таблицы. Однако, когда вы пытаетесь изменить таблицу, изменяя ключ, он изменяет этот экземпляр. Следовательно, вам нужно снова вызывать Sortable.create () всякий раз, когда обновляется компонент vue.

person deepmicrobe    schedule 17.07.2019