Vuetify v-data-table 拖放答案

【问题标题】：Vuetify v-data-table drag and dropVuetify v-data-table 拖放
【发布时间】：2019-11-19 10:56:50
【问题描述】：

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

【问题讨论】：

你能显示你更新 vuex 商店的代码吗？
这是我在 mount 生命周期钩子上调用的方法，它从 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() } })

标签： vue.js vuex vuetify.js sortablejs vue-data-tables

【解决方案1】：

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

我的猜测是，当您调用 Sortable.create(table, ...) 时，它指的是 table 元素的该实例。但是，当您尝试通过修改键来更改表时，它会更改该实例。因此，每当更新 vue 组件时，您都需要再次调用 Sortable.create()。

【讨论】：