今天用computed写禁用按钮的状态时,发现当item.isFolder为true的时候不能禁用。
const btnDisabled = computed(()=>{
if(!multipleSelection.value){
return true;
}else{
if(multipleSelection.value.length==0){
return true
}else{
multipleSelection.value.forEach((item)=>{
console.log(item.isFolder)
if(item.isFolder==true){
return true;
}
})
return false;
}
}
})
查了资料后,发现forEach
循环中使用 return
语句只会结束当前的循环而不会中断整个 computed
函数的执行。因此,即使在循环中检测到 isFolder
为 true
的项,也不会立即返回 true
值,而是继续执行后面的代码,最终返回 false
。
所以我们可以用some方法来判断
some
方法会在数组中找到第一个满足条件的元素后立即返回 true
,否则返回 false
。这样就可以在找到第一个 isFolder
为 true
的元素后立即返回 true
,从而正确地禁用按钮。
以下是使用 some
方法的修改后的代码示例:
const btnDisabled = computed(() => {
if (!multipleSelection.value) {
return true;
} else if (multipleSelection.value.length === 0) {
return true;
} else {
const hasFolder = multipleSelection.value.some((item) => {
return item.isFolder === true;
});
return hasFolder;
}
});