我有一个问题,使无限循环。这是我的项目的简短过程。我有一个datatable
,我用Firebase OnSnapShot
函数对表进行了分页。该表的“操作”列将在单击时显示一个模式。当我更新来自表的值时,vuelidate isUnique
函数将触发无限循环。
P.S我在查看模态之前要先分离听众
无限循环的输出:
这是我加载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);
})
});
};
最佳答案
查看了另一个使用here中的isUnique
的示例,并认为您可能必须从Promise
本身返回isUnique
本身。
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我们仍然有一个未解决的问题。
关于javascript - Vuelidate isUnique导致无限循环,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58551915/