javascript - 如果if语句为true,则在Vue.js中隐藏选项卡

标签 javascript vue.js if-statement tabs show-hide

我有一个Vue组件,它的模板如下所示:

<template>
  <div>
    <div class="row" >
      <button class="btn btn-primary" style="margin-bottom:20px" @click="changeSelectedComp">Back</button>
      <button class="btn btn-primary" style="margin-left:1000px" @click="EditMode">Edit</button>
    </div>

    <vue-tabs>
      <v-tab title="Basic">
        <app-players></app-players>
      </v-tab>
      <v-tab title="History">
        <app-histories></app-histories>
      </v-tab>
      <v-tab title="Timetable">
        <app-timetables></app-timetables>
      </v-tab>
      <v-tab title="Scholarship">
        <app-scholarship></app-scholarship>
      </v-tab>
    </vue-tabs>
  </div>
</template>


我要实现的是如果此语句为true,则隐藏选项卡HistoryTimetableScholarship

IsCurrentUserMemberOfGroup("Admins", function (isCurrentUserInGroup) {
    if(isCurrentUserInGroup) {
        // hide the tabs
    }
});


这是IsCurrentUserMemberOfGroup函数:

function IsCurrentUserMemberOfGroup(groupName, OnComplete) {

    var currentContext = new SP.ClientContext.get_current();
    var currentWeb = currentContext.get_web();

    var currentUser = currentContext.get_web().get_currentUser();
    currentContext.load(currentUser);

    var allGroups = currentWeb.get_siteGroups();
    currentContext.load(allGroups);

    var group = allGroups.getByName(groupName);
    currentContext.load(group);

    var groupUsers = group.get_users();
    currentContext.load(groupUsers);

    currentContext.executeQueryAsync(OnSuccess,OnFailure);

    function OnSuccess(sender, args) {
        var userInGroup = false;
        var groupUserEnumerator = groupUsers.getEnumerator();
        while (groupUserEnumerator.moveNext()) {
            var groupUser = groupUserEnumerator.get_current();
            if (groupUser.get_id() == currentUser.get_id()) {
                userInGroup = true;
                break;
            }
        }
        OnComplete(userInGroup);
    }

    function OnFailure(sender, args) {
        OnComplete(false);
    }
}


我看了v-if(视情况渲染),但是还不了解语法。
尝试了<vue-tabs v-if="IsCurrentMemberofGroup">,但是它不起作用。

如果if语句为true,如何隐藏选项卡?
(这是full component

最佳答案

isCurrentUserInGroup放入数据中,以便您可以引用它:

export default {
        components: {
            ...
        },
        methods: {
            ...
        },
        data: {
            isCurrentUserInGroup: false
        }
    };


并在需要的地方设置为true或false。
然后,可以将其与选项卡中的v-if一起使用:

<vue-tabs>
      <v-tab title="Basic">
        <app-players></app-players>
      </v-tab>
      <v-tab v-if="isCurrentUserInGroup" title="History">
        <app-histories></app-histories>
      </v-tab>
      <v-tab v-if="isCurrentUserInGroup" title="Timetable">
        <app-timetables></app-timetables>
      </v-tab>
      <v-tab v-if="isCurrentUserInGroup" title="Scholarship">
        <app-scholarship></app-scholarship>
      </v-tab>
    </vue-tabs>

关于javascript - 如果if语句为true,则在Vue.js中隐藏选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60059695/

相关文章:

javascript - Vue方法上的对象数组

vue.js - 右键单击 vuejs 应用程序时出错

javascript - 三元运算符中的多重运算

javascript - 陷入 else if Javascript 循环

javascript - 使用 Jquery 隐藏所选项目

javascript - jQuery-如何将class()添加到与属性值匹配的元素

javascript - 选择输入媒体设备以使用Web音频APi进行音频录制

javascript - 创建具有返回值的对象

javascript - 带有 Node 的 Http 请求?

javascript - Vue.js 中的嵌套属性类型