vue.js - 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()。