v-if 函数不返回任何内容，但它应该

Question

遇到了过去两个小时一直困扰我的问题。

我在 mixin 中有一个函数，如下所示：

 checkPermissionMeetings(type,areaID){
            if(this.$store.state.global.permissions.meetings===true) { //If user has basic meeting access
                if(type==='write'){
                    Object.entries(this.$store.state.global.permissions.meeting_areas).forEach(([key, val]) => {
                        if (parseInt(key) === parseInt(areaID) && (val === 'write')) {
                            console.log('write_true')
                            return true;
                        }
                    });
                }
                if(type==='read'){
                    Object.entries(this.$store.state.global.permissions.meeting_areas).forEach(([key, val]) => {
                        if (parseInt(key) === parseInt(areaID) && (val === 'read' || val === 'write')) {
                            console.log('read_true')
                            return true;
                        }
                    });
                }
            }
        },

我在呈现导航栏的视图组件中调用它：

<span v-for="area in area_meetings">
                        {{area.id}} {{$store.state.global.permissions.meeting_areas[area.id]}} //This is here so I can see that I am sending the correct values to the function
                        {{checkPermissionMeetings('read', area.id)}} //This is here so I can see the output, but it returns nothing
                        <router-link tag="v-list-item" link :to="'/meetings/'+area.id" class="ml-5" v-if="checkPermissionMeetings('read', area.id)">
                            <v-list-item-icon>
                                <v-icon>mdi-chair-rolling</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>{{area.name}}</v-list-item-title>
                        </router-link>
                    </span>

我已经控制台记录了输出，如您在代码中看到的那样，它们看起来不错。我还将该函数放在大括号中，以便我可以看到返回值，但这根本不返回任何内容。

我可以在我的商店中看到它们

我什至在渲染上回显它们并且值匹配...

是我在这里缺少一些基本的东西吗？

Answer 1

因为您的 return 进入 forEach 方法，所以您的 main 函数不会返回任何内容。您可以尝试保存一些变量返回的数据，并在 if 语句之后返回它。或者更简单的方法是使用另一个循环，例如 for of

Answer 2

正如其他答案中所述，使用 for 会起作用，但我将描述为什么它不起作用：

function functionWithForEach(arr) {
arr.forEach(a=>{
    if(a == "matched"){
        return "horrah";
    }
})
// here it is anonymous function
//The return exits the current function which is anonymous so it doesn't get returned
}

function functionWithForOf(arr){
    for(let a of arr){
        if(a == "matched"){
            return "horrah";
            // here it is not anonymous function
        }
    }
}

function functionWithPlainFor(arr){
    for(let index =0; index < arr.length; index++){
        if(arr[index]=="matched"){
            return "horrah";
        }
    }
}

function functionWithForEachVariable(arr) {
    let wordMatched = "";
arr.forEach(a=>{
    if(a == "matched"){
        wordMatched = "horrah";
        return "horrah";
    }
}
)
// see how the return does let code below it to execute
console.log("I will be called no matter return is called inside forEach");
return wordMatched;
}



let matchingArr = ["mat","matched","not correct"];

console.log(functionWithForEach(matchingArr),"from forEach");
console.log(functionWithForOf(matchingArr),"from for-of");
console.log(functionWithPlainFor(matchingArr),"from plain for");
console.log(functionWithForEachVariable(matchingArr),"from forEach with Variable");

从这些可以清楚地看出，在这种情况下我们不能使用 forEach

如果您想了解更多信息：

`return` 关键字在 `forEach` 函数中意味着什么？

短路Array.forEach就像调用break

为什么使用 return 时 forEach 返回 undefined声明