vue中sortable如何参照后台排序

Sortable 是一个基于 JavaScript 的库，可以用于实现拖拽排序功能。在 Vue 中使用 Sortable 可以参照后台排序，具体步骤如下：

1. 在后台将需要排序的数据按照排序规则进行排序，并将排序结果返回给前端。
2. 在前端使用 Sortable 实现可拖拽排序的功能。
3. 当用户拖拽排序完成后，将排序结果上传至后台，更新数据库中的排序规则。

具体实现可以参考以下代码：

<template>
  <div>
    <ul ref="list">
      <li v-for="(item, index) in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    // 从后台获取排序后的数据
    this.getListFromBackend()
  },
  methods: {
    getListFromBackend () {
      // 获取数据并按照排序规则排序
      // TODO: 调用后台接口获取排序后的数据
      const sortedData = this.getSortedDataFromBackend()

      // 更新前端数据
      this.list = sortedData
    },
    getSortedDataFromBackend () {
      // 省略从后台获取排序后的数据的代码
    },
    saveListToBackend () {
      // 将排序结果上传至后台
      // TODO: 调用后台接口保存排序结果
      const sortedData = this.$refs.list.sortable.toArray()
      this.saveSortedDataToBackend(sortedData)
    },
    saveSortedDataToBackend (sortedData) {
      // 省略将排序结果上传至后台的代码
    }
  },
  mounted () {
    // 使用 Sortable 实现可拖拽排序
    const list = this.$refs.list
    new Sortable(list, {
      onEnd: this.saveListToBackend
    })
  }
}
</script>

在上述代码中，我们首先在 mounted 钩子函数中从后台获取排序后的数据，并更新到前端。然后使用 Sortable 实现可拖拽排序功能，并在拖拽排序完成后调用 saveListToBackend 方法将排序结果上传至后台。最后在 saveListToBackend 方法中调用后台接口保存排序结果。