Vuelidate isUnique вызывает бесконечный цикл - PullRequest
Новая
       11

Vuelidate isUnique вызывает бесконечный цикл

2 голосов
/ 25 октября 2019

У меня есть проблема в vuelidate, которая вызывает бесконечный цикл. Вот краткий процесс моего проекта. У меня есть datatable, я использовал функцию Firebase OnSnapShot для разбивки таблицы. В таблице есть столбец действий, в котором при нажатии будет отображаться модальное окно. Когда я обновляю значение, полученное из таблицы, функции vuelidate isUnique запускают бесконечный цикл.

PS Я отключаю слушателя перед просмотром модального

Вывод бесконечного цикла:

enter image description here

ВотМоя функция для загрузки datatable: 

 async loadData(firebasePagination) {
      // query reference for the messages we want
      let ref = firebasePagination.db;

      // single query to get startAt snapshot
      ref.orderBy(firebasePagination.orderColumn, 'asc')
        .limit(this.pagination.rowsPerPage).get()
        .then((snapshots) => {
          // save startAt snapshot
          firebasePagination.start = snapshots.docs[snapshots.docs.length - 1]

          // create listener using endAt snapshot (starting boundary)
          let listener = ref.orderBy(firebasePagination.orderColumn)
            .endAt(firebasePagination.start)
            .onSnapshot((datas) => {
              if(!datas.empty){
                datas.docs.forEach((data, index) => {
                  //remove duplicates
                  console.log("here")
                  firebasePagination.data = firebasePagination.data.filter(x => x.id !== data.id)
                  //push to the data
                  firebasePagination.data.push(Object.assign({id : data.id },data.data()))

                  if(datas.docs.length-1 === index){
                    //sort
                    firebasePagination.data.sort((a, b) => (a[firebasePagination.orderColumn] > b[firebasePagination.orderColumn]) ? 1 : -1)
                    //get the current data
                    firebasePagination.currentData = this.getCurrentData(firebasePagination)
                  }
                })
              }
            })
          // push listener
          firebasePagination.listeners.push(listener)
        })
      return firebasePagination;
    }

Вот моя функция при нажатии на действие (Модальное): 

   switch(items.action) {
      case 'edit':
        //detaching listener
        this.firebasePagination.listeners.forEach(d => {
          d()
        });
        items.data.isEdit = true;
        this.clickEdit(items.data);
        break;
    }
  }

Вот моя isUnique функция: 

validations: {
      department: {
        name: {
          required,
          async isUnique(value){
            if(value.trim() === ''){
              return false;
            }
            if(strictCompareStrings(this.departmentName, value)){
              this.departmentError.isActive = true;
              this.departmentError.isValid = true;
              return true;
            }
            const result = await checkIfUnique(DB_DEPARTMENTS, {nameToLower : this.department.name.toLowerCase()});
            console.log("GOES HERE")

            if(!result.isValid){
              result.errorMessage = result.isActive ?
                'Department already exists.' : 'Department has been archived.';
            }
            this.departmentError = Object.assign({}, result);
            return this.departmentError.isValid;
          }
        }
      }
    }

Вот моя функция checkUnique: 

export const checkIfUnique = (db, nameObj, isTrim = true) => {
  return new Promise(resolve => {
    const nameObjKey = Object.keys(nameObj)[0];
    const name = isTrim ? nameObj[nameObjKey].replace(/\s+/g,' ').trim().toLowerCase() : nameObj[nameObjKey].trim();
    db().where(nameObjKey, '==', name).get()
      .then((doc) => {
        let result = {isActive: false, isValid: true, errorMessage: ''};
        if(!doc.empty){
          result.isActive = doc.docs[0].data().isActive;
          result.isValid = false;
        }
        resolve(result);
      })
  });
};

1 Ответ

0 голосов
/ 31 октября 2019

Изучил другой пример использования isUnique из здесь и подумал, что вам, возможно, придется вернуть сам Promise из самого isUnique. 

  isUnique(value) {
    if (value === '') return true
    return new Promise((resolve, reject) => {
      yourQueryMethod(`....`)
        .then(result => resolve(result))
        .catch(e => reject(false));
    })
  }

Ноопять же, у нас все еще есть открытая проблема относительно Бесконечного цикла при использовании проверки на основе обещания # 350 .

...