javascript - 带有OR的Vue.js v-if无法正常工作

我的代码中存在逻辑错误，但我不明白为什么。

如果用户位于名为History的组中，或者如果用户位于名为BasicSport的组中，我想隐藏名为Basic的选项卡。

我通过以下方式实现了这些标签：

<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 v-if="(!basicGroup || !basicSportGroup)" title="History">
        <app-histories></app-histories>
      </v-tab>
      <v-tab v-if="!basicGroup" title="Timetable">
        <app-timetables></app-timetables>
      </v-tab>
      <v-tab v-if="!basicGroup" title="Scholarship">
        <app-scholarship></app-scholarship>
      </v-tab>
    </vue-tabs>
  </div>
</template>

在这种情况下，即使用户位于History组中，BasicSport选项卡仍会显示：



但是如果我写

<v-tab v-if="!basicSportGroup" title="History">

该选项卡不显示：



我不明白为什么第二个有效，但是第一个无效，因为OR不是唯一的。
如果用户位于History或属于BasicSport组，如何隐藏Basic选项卡？

这是full component

最佳答案

如果“某个用户位于一个称为BasicSport的组中，或者该用户位于一个称为Basic的组中，则要隐藏它（1）

因此，如果用户不在BasicSport且不在Basic中，则要显示它。 （2）

您的逻辑应为：

(1)
<v-tab v-if="!(basicGroup || basicSportGroup)" title="History">
  <app-histories></app-histories>
</v-tab>

要么

(2)
<v-tab v-if="!basicGroup && !basicSportGroup" title="History">
  <app-histories></app-histories>
</v-tab>