Vuetify v-data-table 拖放

Question

我正在使用 V-data-table 和 vuex 存儲。 以下是我如何配置 v-data-table 的要點

1. 對每列禁用排序
2. 將 v-data-table 項與 vuex 狀態存儲數據綁定
3. 使用 sortablejs 拖放行

問題：當我拖放 v-data-table 中的行時，我正在更新 vuex 存儲（使用表行索引值更新數組中對象的索引值）。 Vuex 正在正確更新，但在 v-data-table 中呈現的數據與它們在 vuex 狀態存儲中的順序不一致

有人可以幫助我嗎

我試圖克服這個問題的最好方法是強制重新渲染 v-data-table 組件，但是當我這樣做時，我不能再拖放了

使用以下模板強制渲染

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

Answer 1

這可能不是最佳解決方案，但我遇到了類似的問題，只是我只是使用了常規數組。 我設法通過在 updated() 生命周期鈎子中調用 Sortable.create() 方法來修復它。

我的猜測是，當您調用 Sortable.create(table, ...) 時，它指的是 table 元素的那個實例。 但是，當您嘗試通過修改鍵來更改表時，它會更改該實例。 因此，每當 vue 組件更新時，您都需要再次調用 Sortable.create()。