如何使用Vue.Draggble对Firebase实时存储进行排序？

如何解决如何使用Vue.Draggble对Firebase实时存储进行排序？

我有一个Vue.js项目，并且我的客户列表中有名-姓氏-地址-城市/州/省电子邮件，像这样>>> See project image here...

使用蓝色按钮- Kayit Ol -我填写表格并进行注册。查看图片>> Register Form

当我单击黄色按钮- Ayarlar -我需要查看Draggble列表中的所有城市，并在Draggble中排序并单击绿色按钮-Şehre GöreSırala-，下面的客户列表应与Draggble列表排序相同。我使用了 Vue.Draggble软件包（ https://github.com/SortableJS/Vue.Draggable ），但是我无法正确获取Firebase数据并对其进行排序。

SignUp.vue

    // Musteriler
var clientRef = db.ref('musteriler/');
var newClient = clientRef.push();

//Cities
var citiesRef=db.ref('cities/');
var newCity = citiesRef.push();
  
  export default {
    data() {
      return {
        form: {
          firstName: '',lastName: '',address: '',city:'',province:'',email: '',},selectedCities:['Ankara','Adana',],cities : ['','Adıyaman','Afyon','Ağrı','Amasya','Ankara','Antalya','Artvin','Aydın','Balıkesir','Bilecik','Bingöl','Bitlis','Bolu','Burdur','Bursa','Çanakkale','Çankırı','Çorum','Denizli','Diyarbakır','Edirne','Elazığ','Erzincan','Erzurum','Eskişehir','Gaziantep','Giresun','Gümüşhane','Hakkari','Hatay','Isparta','Mersin','İstanbul','İzmir','Kars','Kastamonu','Kayseri','Kırklareli','Kırşehir','Kocaeli','Konya','Kütahya','Malatya','Manisa','Kahramanmaraş','Mardin','Muğla','Muş','Nevşehir','Niğde','Ordu','Rize','Sakarya','Samsun','Siirt','Sinop','Sivas','Tekirdağ','Tokat','Trabzon','Tunceli','Şanlıurfa','Uşak','Van','Yozgat','Zonguldak','AkSaray','Bayburt','Karaman','Kırıkkale','Batman','Şırnak','Bartın','Ardahan','Iğdır','Yalova','Karabük','Kilis','Osmaniye','Düzce'],show: true
      }
    },methods: {
      onSubmit(evt) {
        evt.preventDefault();
        newClient.set(this.form);
        this.selectedCities.push(...this.selectedCities,this.form.city);
        console.log(this.selectedCities);
        newCity.set(this.selectedCities);
        alert(JSON.stringify(this.form))
      },onReset(evt) {
        evt.preventDefault()
        // Reset our form values
        this.form.firstName = ''
        this.form.lastName = ''
        this.form.address = ''
        this.form.city = ''
        this.form.province = ''
        this.form.email = ''
        // Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
  }
</script>

Settings.Vue

<template>
  <div class="col s12 drag">
      <div class="col s12">
            <p>Şehirleri sürükleyerek listeyi istediğiniz şekilde sıralandırabilirsiniz.</p>
      </div>
     <div class="col s12 mx-auto">
        <draggable v-model="cities" class="draggable-container" @ended="onEnd" ghost-class='ghost'>
            <transition-group type="transition" name="flip-list">
                <div class="sortable mx-auto" v-for="item in cities" :key="item">
                    <strong>{{item}}</strong>
                </div>
            </transition-group>
        </draggable>

        <button class="btn btn-success mb-3" @click="onSort">Şehre Göre Sırala</button>
     </div>
  </div>
</template>

<script>

import {db} from '../firebase/db';
import draggable from 'vuedraggable'

var cityRef=db.ref('cities')
console.log(cityRef);

  export default {
      components: {
            draggable,firebase:{
            cities: cityRef,data() {
      return {

      }
    },methods: {
      onEnd(evt) {
        evt.preventDefault();
        console.log(evt);

      },onSort() {
      this.cities = this.cities.sort((a,b) => a.order - b.order);
    }
      
    }
  }
</script>

Firebase数据

请参阅Firebase RealTime数据库弹药图片>>> musteriler.json

请参阅Firebase RealTime数据库城市图片>>> cities.json

那我应该如何安排数据库以及如何按Vue.Draggble正确排序客户列表？

谢谢。