Vue.js v-if 与 OR 不能正常工作

Question

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

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

我通过以下方式实现了选项卡：

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

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

但是如果我写

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

选项卡未显示：

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

这是full component

Answer 1

您想隐藏如果"a user is in a group called BasicSport or if he is in a group called 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>

Answer 2

您必须使用 && 运算符而不是 || 运算符，因为您只想显示不在 BasicSport 中且不在 Basic 中的情况。

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

或者你也可以试试!(basicGroup || basicSportGroup)

Vue.js v-if 与 OR 不能正常工作

Vue.js v-if with OR doesn't work properly

javascript

tabs

logical-operators

vue.js