javascript - Vuelidate isUnique 导致无限循环

Question

我在 vuelidate 中遇到导致无限循环的问题。这是我的项目的简要过程。我有一个 datatable，我使用 Firebase OnSnapShot 函数对表格进行分页。该表具有操作列，单击时将显示模态。当我更新来自表的值时，vuelidate isUn​​ique 函数会触发一个无限循环。

P.S 我在查看模式之前分离监听器

无限循环的输出:

这是我加载数据表的函数:

 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;
    }

这是我点击 Action 时的功能(模态):

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

这是我的 isUn​​ique 函数:

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);
      })
  });
};

Answer 1

查看另一个使用来自 here 的 isUn​​ique 的示例并考虑到您可能必须从 isUn​​ique 本身返回 Promise 本身。

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

但话又说回来，我们仍然有一个关于 Infinite loop when using a promise-based validate #350 的悬而未决的问题.