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

Question

运行进入一个困扰我 2 个小时的问题。

我在 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>

我已经在控制台记录了您在代码中看到的输出，它们看起来没问题。我还将函数放在花括号中，这样我就可以看到 return，但是这个 return 什么都没有。

我可以在我的店里看到它们

我什至在渲染中将它们呼应出来并且值匹配...

我是否遗漏了一些基本的东西？

Answer 1

因为您的 return 进入了 forEach 方法，所以您的 main 函数没有 return 任何东西。您可以尝试保存一些变量 returned 数据并在 if 语句 return 之后。或者更简单的方法是使用另一个循环，比如 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

如果您想进一步了解这些：

Short circuit Array.forEach like calling break

Why does this forEach return undefined when using a return statement

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

v-if function returning nothing, but it should

javascript

vue.js

vuejs2

vuex