2

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

PS我在查看模态之前分离监听器

无限循环的输出：

在此处输入图像描述

这是我加载的函数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);
      })
  });
};
4

1 回答 1

0

isUnique从这里查看了另一个使用示例，并认为您可能必须Promise从自身返回isUnique自身。

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

但是话又说回来，当使用基于 promise 的验证 #350 时，我们仍然有一个关于无限循环的未解决问题。

于 2019-10-31T10:48:47.717 回答