Vue.js Vuetify v-data-table拖放

我正在使用V-data-table和vuex存储。下面是我如何配置v-data-table的要点

对每列禁用排序

将v-data-table项与vuex状态存储数据绑定

使用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;  
    }
  }
}

//剧本
导出默认值{
数据（）{
返回{
componentKey:0，
};
},
方法：{
forcerender（）{
此.componentKey+=1；
}
}
}

这可能不是最佳解决方案，但我也遇到了类似的问题，只是我只是使用了一个常规数组。我通过在updated（）生命周期钩子中调用Sortable.create（）方法来修复它

---

我的猜测是，当调用Sortable.create（table，…）时，它引用了table元素的实例。但是，当您试图通过修改键来更改表时，它会更改该实例。因此，每当vue组件更新时，您需要再次调用Sortable.create（）。

能否显示更新vuex存储的代码？这是我在mount life cycle hook上调用的方法，它从vuex操作调用变异，并更新vuex状态存储数组中对象的顺序

Sortable.create（表，{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（）}）