1

我有一个 Vue.js 项目，并且我有这样的客户列表，其中包含名字-姓氏-地址-城市-州/省-电子邮件>>> 请在此处查看项目图片...

使用 Blue Button -- Kayit Ol -- 我填写表格并进行注册。见图>>报名表

当我单击黄色按钮 - Ayarlar - 我需要查看 Draggble 列表中的所有城市，当我在 Draggble 中排序并单击绿色按钮 - Şehre Göre Sırala - 时，下面的客户列表应该排序相同作为拖动列表。我使用了 Vue.Draggble 包（https://github.com/SortableJS/Vue.Draggable），但我无法正确获取 firebase 数据并对它们进行排序。

注册.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 : ['','Adana', '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>

设置.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 实时数据库musteriler图片 >>> musteriler.json

查看 Firebase 实时数据库城市图片 >>> city.json

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

谢谢。

4

0 回答 0